Comment by lelandfe
3 days ago
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).")
> 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
Why do people keep talking about those things as if they were problems?
They ain't! Long live the cascade!
But when the desired outcome is "complete separation from the surrounding page," those are pretty serious problems!