alt Hacker NewsThe shadow DOM and all the encapsulated CSS shenanigans it comes with has get to win me over. I do reach for custom elements quite often though.
A lot of times I just need a small component with state simple enough that it can live in the DOM. Custom elements gives me lifecycle hooks which is often all I really need for a basic component.
Replies
I'm certainly feeling like Shadow DOM is the new iframe and mostly useful for ad networks and "embeds" which are not things I'm generally building with Web Components. It's interesting how many developers seem enamored with Shadow DOM, but for me the sweet spot is keeping all of a Web Component in the "Light" DOM, let CSS do its cascading job, and let my Web Component adapt to the page hosting it rather than be a lonely island of its own style.
It's not actually in some capsule separate from the page, though. CSS variables leak in to it from the "light"/regular DOM. You can query elements in it from the host with `shadowRoot.querySelector()`.
The elements also inherit styles from parents: https://open-wc.org/guides/knowledge/styling/styles-piercing...
You can do a closed root but last I checked that had profound accessibility issues.
(As an aside this is why the linked article is incorrect in saying this: "global styles don’t leak in (unless you explicitly allow them).")