Shadow DOM isolates selectors, while inheritance still crosses the boundary

Simon Willison’s interactive Shadow DOM explainer shows why a component can resist page-wide CSS selectors yet still inherit fonts, colors and custom properties. Its examples connect that distinction to slots and exposed parts, showing how components accept content and deliberate styling from their host page. It also demonstrates how DOM queries and events behave at the boundary.

Simon Willison · Sep 23, 2026

Why it matters

Helpful when styling a web component seems inconsistent with ordinary page CSS.

More context

Try the live stylesheet controls in a browser, then compare slots and parts. The author’s September 23 post dates the explainer. It includes declarative shadow roots, which can render from HTML before JavaScript runs.

Keep in mind

This is an AI-generated teaching artifact published by the author. 1min read the explanations and examples but did not run an interactive browser test. Encapsulation should not be treated as a security boundary.

Original read