top | item 47087630

(no title)

lelandfe | 9 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).")

discuss

order

marcosdumay|9 days ago

> 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?

lelandfe|9 days ago

They ain't! Long live the cascade!

But when the desired outcome is "complete separation from the surrounding page," those are pretty serious problems!