Styling Across the Shadow Boundary

## Two mechanisms that people collapse into one "Shadow DOM encapsulates styles" is true, but it describes only half of what happens. There are two independent things CSS does, and the shadow boundary treats them differently. **Selector matching** is scoped to a tree. A style rule belongs to some tree — the document, or a particular shadow root — and its selectors are evaluated only against elements in that same tree. A document rule cannot reach into a shadow root, and a shadow root's rules cannot reach out into the document (with the deliberately-sanctioned exceptions `:host`, `::slotted()` and `::part()`). **Inheritance** is not selector matching. It is the step where an element that has no cascaded value for an inherited property takes its parent's computed value. That step runs over the *flattened tree*, which stitches shadow trees into the document: a shadow root's top-level children inherit from the host element, and slotted light-DOM nodes inherit from wherever the slot sits in the shadow tree. Nothing about encapsulation blocks it. So the page's `body { font-family: Georgia }` never "matches" the `<span class="label">` inside the shadow root. It matches `<body>`, and the value is then inherited down through the host and into the shadow tree, arriving at the span with no rule ever having selected it. ## Which properties cross The dividing line is exactly the CSS spec's inherited flag, nothing shadow-specific: - **Cross by inheritance**: `color`, `font` and all its longhands, `line-height`, `letter-spacing`, `word-spacing`, `text-align`, `text-transform`, `white-space`, `visibility`, `cursor`, `direction`, `list-style`, and — importantly — every **custom property** (`--*`). - **Do not cross**: `display`, `background`, `border`, `padding`, `margin`, `width`/`height`, `position`, `box-shadow`, `overflow`, `box-sizing`, `opacity`, `transform`. ```css /* document stylesheet */ body { font-family: Georgia; color: #333; } * { box-sizing: border-box; } /* never applies inside a shadow root */ my-card .label { color: red; } /* matches nothing */ ``` The span ends up Georgia and `#333`, with `box-sizing: content-box`, because the universal selector rule matched only document-tree elements. ## The reset-stylesheet trap This is the most common real-world bite. Teams ship a normalize/reset stylesheet and assume it governs the whole page. Inside every shadow root, none of it applies: margins on `<h1>`, the default `box-sizing`, button font inheritance quirks all revert to UA defaults. A component that looked fine in a demo page (which had a reset and no shadow root) can shift once its markup moves inside a shadow root. Component authors therefore ship their own small reset inside the shadow root rather than relying on the host page's. ## Open vs closed is irrelevant here `attachShadow({ mode: 'open' })` versus `'closed'` only decides whether `element.shadowRoot` returns the root to script. Style encapsulation, inheritance, `::part()` and `::slotted()` behave identically in both modes. A candidate who says page CSS can select into an open root but not a closed one has the model wrong. ## Controlling the inheritance you get for free Sometimes the free inheritance is what you want — a component picks up the page's typography automatically and looks native. Sometimes it is contamination: the page sets `line-height: 3` and your compact toolbar sprawls. The blunt tool is to reset at the doorway: ```css :host { all: initial; /* stops inherited values from the page */ display: block; /* all: initial reset display too, so re-declare */ } ``` `all: initial` on `:host` wipes every inherited property at the host, so nothing arrives from outside. It is heavy-handed: it also resets `display`, so you must set it again, and you lose the "blends into the page" property. A gentler approach is to re-declare only the handful you care about (`font: 16px/1.4 system-ui;`) and let the rest inherit. ## What this leaves for theming Because selectors do not cross, a page cannot restyle a component's internals by writing selectors, no matter how specific. The three sanctioned ways in are: inherited properties (free, but limited to what inherits), **custom properties** the component author wired into `var()` calls, and **`part` names** the author exposed for `::part()`. Everything else is intentionally private — which is the whole point, and also the reason a component with no theming hooks is effectively unstylable.