[webstrand]

Without the shadow dom, though, what really is the difference from just using `<div>` elements? You can't use slots, you're vulnerable to bad `querySelector`s, events aren't isolated, and you get none of the performance benefits.

I've tried to find a workable solution using style inheritance, but it doesn't work everywhere. On code sandbox sites like codepen.io, the stylesheet is generated for you and sometimes updated in-place. You'd have to watch with a MutationObserver and then propagate the change to every instance of a custom element on the page.

[kerkeslager]

> You'd have to watch with a MutationObserver and then propagate the change to every instance of a custom element on the page.

This solution works in that you can create a mixin that does this and use it in your custom elements. But if you profile it I think you'll discover it's painfully slow. It's not noticeable if you're using a few custom elements here and there, but if you're, for example, making a table of custom elements, the page will load slowly.

[webstrand]

Yeah, that's exactly my experience. I built a framework for quickly prototyping with web components before I discovered the CSS-isolation defect. Sadly it's pretty much killed that idea as unworkable.

<https://codepen.io/webstrand/pen/jOzYVpL> is as far as I got. The FOUS is pretty annoying, too, before the templates get properly registered. But I could live with that.

[azangru]

> Without the shadow dom, though, what really is the difference from just using `<div>` elements?

Having a lifecycle that you can hook into to know when to run code related to this particular instance of the custom element.

See e.g. a recent talk on web components — https://youtu.be/jBJ7eoPtmY8?t=367