v148 · CSS · Web Components · demo

Shadow DOM Theming

Three named CSS modules — theme-default, theme-dark, theme-warm — adopted dynamically by shadow roots via shadowRoot.adoptedStyleSheets. When themes switch, all shadow roots re-style simultaneously without destroying or re-rendering internal DOM nodes.

Active module: theme-default

Shadow Root Live Telemetry (Widget 1)

Metric	Observed Value	Verification Note
Style adoption mechanism	adoptedStyleSheets	Native ✓
`adoptedStyleSheets.length`	1	1 constructable stylesheet adopted
Original DOM nodes preserved	true (connected)	Zero DOM destruction / zero node disconnects

<!-- Three named theme modules defined once in <head> -->
<style type="module" specifier="theme-default">
  :host { background: #fdfcf8; border: 2px solid #000; ... }
  .widget-value { color: #000; }
</style>

<style type="module" specifier="theme-dark">
  :host { background: #111827; border: 2px solid #374151; ... }
  .widget-value { color: #f9fafb; }
</style>

<!-- Components adopt the stylesheet without re-rendering internal nodes -->
const sheet = new CSSStyleSheet();
sheet.replaceSync(moduleCss);
shadowRoot.adoptedStyleSheets = [sheet];

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗