I've been doing this for about three or four years. Clever idea, tricky in practice. I don't think I'd recommend this approach broadly. But it works for me.

It's definitely possible to take it too far. When most tags in your HTML are custom elements, it creates new readability problems. You can't immediately guess what's inline, what's block, etc. And it's just a lot of overhead for new people to learn.

I've arrived at a more balanced approach. It goes something like this:

If there's a native tag, like <header> or <article>, always use that first.

If it's a component-like thing, like an <x-card> or <x-hero>, then go ahead and use the custom tag. Even if it's CSS only, without JS.

If the component-like thing has sub-components, declare the pieces using slot attributes. There will be a great temptation to use additional custom tags for this, like <x-hero-blurb> inside <x-hero>. In my experience, a <div slot="hero-blurb"> is a lot more readable. The nice thing about this pattern is that you can put slot attributes on any tag, custom or otherwise. And yes, I abuse the slot attribute even when I'm only using CSS, without JS.

Why bother with all of this? I like to limit my classes to alteration, customization. When I see a <div slot="card-content" class="extra-padding-for-xyz">, it's easy to see where it belongs and what makes it unique.

Some of you will likely barf. I accept it. But this has worked well for me.

▲ mikae1 4 hours ago | parent | next [-]

> And yes, I abuse the slot attribute even when I'm only using CSS, without JS.

In CSS, how do you target <div slot="hero-blurb"> based on the "hero-blurb" slot?

div[slot="hero-blurb"]?

	▲	verisimilidude 3 hours ago \| parent [-]
		Yes, though often I’ll omit the tag, and just target [slot=“hero-blurb”]. Depends on the situation.

▲ keepamovin 16 hours ago | parent | prev | next [-]

I'm highly interested in approaches that utilize web grain in a balanced practical way. Do you have a framework/toolbelt or example sites to share? Would love to see.

If you're interested in my approach to custom elements I created: https://github.com/crisdosaygo/good.html

It utlizes custom elements, has autohooks for granular DOM updates, uses native JS template literal syntax for interpolation, imposes ordered component structure:

  .
  ├── package.json
  └── src
      ├── app.js
      └── components
          ├── app-content
          │   ├── markup.html
          │   ├── script.js
          │   └── styles.css
          └── app-header
              ├── markup.html
              ├── script.js
              └── styles.css

It even has a bit of a "comment node" hack to let you write "self-closing custom elements"

  <!app-header />

Good.HTML is the ride-or-die framework for BrowserBox.

	▲	verisimilidude 3 hours ago \| parent \| next [-]
		Thanks for sharing, that’s an interesting framework. The self-closing tags are very nice. Unfortunately, I don’t have anything public to show at the moment. Maybe I’ll blog about the approach some day.
	▲	pegasus 5 hours ago \| parent \| prev [-]
		Why is this being downvoted? I'm baffled. The comment is coherent and relevant to the discussion at hand.

▲ crabmusket 6 hours ago | parent | prev [-]

That reminds me of BEM, where slow= is like the "element" within a parent "block".