v148 · CSS · Web Components

CSS Module Playground

Compare three ways to style shadow DOM: dynamic CSSStyleSheet construction, the JS import assertions pattern, and the new declarative approach. Edit CSS live, apply it, watch all shadow roots update.

Approach selector

CSS Editor

:host {
  display: block;
  padding: 1rem;
  border: 2px solid #000;
  background: #f4f3ee;
  font-family: sans-serif;
}
h3 { font-size: 1rem; margin: 0 0 0.5rem; color: #000; }
p  { font-size: 0.82rem; color: #2d2d2d; margin: 0; }

Shadow Root Preview

// Approach 1: CSSStyleSheet constructed at runtime
const sheet = new CSSStyleSheet();
await sheet.replace(cssText);
shadowRoot.adoptedStyleSheets = [sheet];

Simulated CSS Module

:host {
  display: block;
  padding: 1rem;
  border: 2px solid #000;
  background: #ffffff;
  font-family: monospace;
}
h3 { font-size: 0.95rem; color: #0022ff; margin: 0 0 0.4rem; }
p  { font-size: 0.78rem; color: #666; margin: 0; }

Shadow Root Preview

// Approach 2: JS import assertion (dynamic simulation here)
// In a real module: import styles from './styles.css' assert {type: 'css'};
// Here we simulate via a Blob URL + CSSStyleSheet
const url = URL.createObjectURL(new Blob([cssText], {type:'text/css'}));
const sheet = await import(url, {assert: {type: 'css'}});
shadowRoot.adoptedStyleSheets = [sheet.default];

Declarative Module Editor

:host {
  display: block;
  padding: 1rem;
  border: 2px solid #000;
  background: #fdfcf8;
  font-family: Georgia, serif;
}
h3 { font-size: 1.05rem; font-weight: 600; color: #000; margin: 0 0 0.4rem; }
p  { font-size: 0.84rem; color: #2d2d2d; margin: 0; line-height: 1.5; }

Shadow Root Preview

<!-- Chrome 148 declarative approach -->
<style type="module" specifier="my-styles">
  :host { display: block; padding: 1rem; }
  h3 { color: black; }
</style>

<my-card>
  <template shadowrootmode="open"
            shadowrootadoptedstylesheets="my-styles">
    <h3>Card</h3><p>Declarative styling!</p>
  </template>
</my-card>

Load time comparison

CSSStyleSheet —

import assert —

declarative —

Click "Apply" in each tab to record timing. Declarative modules are parsed at HTML-parse time — no JS round-trip overhead.

One module, three shadow roots

Edit the shared CSS below and click "Share to all roots" to watch three independent shadow DOMs update simultaneously — the key value of module adoption.

:host {
  display: block;
  padding: 0.8rem;
  border: 2px solid #000;
  background: #f4f3ee;
  font-family: sans-serif;
}
.component-name { font-size: 0.7rem; color: #666; text-transform: uppercase; letter-spacing: 0.05em; }
.component-body { font-size: 0.85rem; color: #000; margin-top: 0.35rem; }

With declarative modules, all three hosts would have shadowrootadoptedstylesheets="shared-styles" — a single style definition, zero duplication.

implementation reference

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

see also

implementation reference