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()`.
replyThe 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).")
> CSS variables leak in to it from the "light"/regular DOM.
reply> You can query elements in it from the host with `shadowRoot.querySelector()`.
> The elements also inherit styles from parents
Why do people keep talking about those things as if they were problems?
They ain't! Long live the cascade!
replyBut when the desired outcome is "complete separation from the surrounding page," those are pretty serious problems!
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.
reply