v148 · CSS · Web Components · demo

Style Module Share

A single inline <style type="module" specifier="card-base"> is adopted by multiple shadow roots — one module, many components. Toggle to the accent module to swap all cards at once.

Chrome 148+ origin trial — Declarative CSS Module Scripts requires an origin trial token or the Experimental Web Platform Features flag. In unsupported browsers, the custom elements below fall back to their JS-defined styles.

<!-- 1. Define a named CSS module inline -->
<style type="module" specifier="card-base">
  :host { border: 2px solid #000; padding: 1rem; }
  .card-title { font-weight: 700; }
</style>

<!-- 2. Apply to a declarative shadow root -->
<info-card>
  <template shadowrootmode="open"
            shadowrootadoptedstylesheets="card-base">
    <slot></slot>
  </template>
  Card content
</info-card>

<!-- The module is applied without any JavaScript -->

implementation reference

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

see also

implementation reference