Web standards imply that non-native tags should have at least one dash (i.e. <x-list>) and not <list>. This may be a problem in the future if browser vendors support new tags such as those introduced in pylon css framework.

WDYT?

Dear Alasdair,

Introduction

We just came across this [1] on HN [2] and want to tell you that the idea of

[...] encapsulating Flexbox logic into a set of declarative and expressive tags and attributes which, when combined, form robust user interfaces.

resonates very well with us. We are still unsure if that could likewise be implemented through WebComponents and friends, but that's a another story.

Nevertheless, we would like to humbly share our thoughts by citing manifestsilence here.

Thoughts

Very cool, but I'd like to point out that unless/until this gets very popular to where Google changes their practices, it wrecks certain SEO perks (though so do a lot of fancy practices). Google still really likes plain old HTML primitives like <OL> or <UL> for lists, <TABLE> for tables, <P> for paragraph. Their featured snippets appear to be capable of extracting info that isn't in that form and bumping it to the top of results, but to prefer not to. My $.02 from starting to learn that game.

-- https://news.ycombinator.com/item?id=20156752

It's not that we are as concerned about SEO things like manifestsilence here, we just would like to ask whether the design of your concept could well be shifted towards a more CSS-only approach by not introducing new HTML tags on the layout primitive level already (that might be intended for larger WebComponents maybe?), but by staying more closely to the regular thing of annotating vanilla HTML tags with CSS classes.

By example

To reflect that by the means of an example, we took that guy from your splash.

Your proposal

<list>
  <hstack spacing=s>
    <div class="icon"></div>
    <text>Westminster</text>
    <spacer></spacer>
    <text>0.5 miles</text>
  </hstack>
  ...

Our idea

<div class="list">
  <span class="hstack" spacing=s>
    <div class="icon"></div>
    <p class="text">Westminster</p>
    <span class="spacer"></span>
    <p class="text">0.5 miles</p>
  </span>
  ...

We do see that the latter is more verbose than your proposal. However, it might blend into the contemporary HTML/CSS runtime stack slightly better.

With kind regards,
Andreas.

[1] https://almonk.github.io/pylon/
[2] https://news.ycombinator.com/item?id=20155098

How could be this library be compatible with React?, because of pylon uses custom tags

What about a new element called "font" that could be used to use a custom font-family, color and size.

<font color="rebeccapurple" size="2em">Lorem ipsum</font>

This is just irony. There a reasons why the font element is obsolete now.
Markup and style should always be separated in my opinion.

Sorry for creating this ticket :-)

During testing I found that there is no value for medium (m) spacing on hstack