Re:If Web Components are so great, why am I not using them?
by kerkeslager on Thursday August 03, 2023 @02:28AM
(#36982129)
> 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.
Re:If Web Components are so great, why am I not using them?
by webstrand on Thursday August 03, 2023 @10:28AM
(#36986450)
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.
Re:If Web Components are so great, why am I not using them?
by azangru on Thursday August 03, 2023 @03:04AM
(#36982351)
> 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
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.