v148 · HTML · CSS Modules

Component Library

A small component library built entirely with declarative CSS module scripts. Four modules — base-tokens, card-styles, button-styles, badge-styles — are defined once and adopted by multiple custom elements via shadowrootadoptedstylesheets.

Checking declarative CSS module script support…

Live module controls

Probe has not run yet.

Cards

Buttons

Badges

Module definition syntax

<!-- Define a named CSS module inline -->
<style type="module" specifier="card-styles">
  :host { display: block; }
  .card { border: 1px solid var(--text-charcoal); padding: 1rem; }
</style>

<!-- Adopt it in a declarative shadow root -->
<x-card>
  <template shadowrootmode="open"
            shadowrootadoptedstylesheets="card-styles">
    <div class="card"><slot></slot></div>
  </template>
  Card content
</x-card>

<!-- Same module, different element — one CSSStyleSheet object -->
<x-card>
  <template shadowrootmode="open"
            shadowrootadoptedstylesheets="card-styles">
    <div class="card"><slot></slot></div>
  </template>
  Another card
</x-card>

references

implementation reference

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