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