Shadow root
An encapsulated DOM tree attached to a host element via attachShadow(). Styles inside the shadow root do not cascade out, and outside selectors do not match into it; CSS custom properties pierce the boundary.
Shadow DOM is the encapsulation primitive behind every Web
Component. Setting mode: 'open' exposes the shadow tree to
script via host.shadowRoot; mode: 'closed' hides it.
Pseudo-classes :host, :host-context(), and ::slotted()
target the host and projected light-DOM children from inside the
shadow stylesheet. Declarative shadow DOM (cross-engine since
2023) lets servers ship shadow trees in the initial HTML without
JavaScript.