Re: [WICG/webcomponents] Declarative CSS Module Scripts (#939)

I like `css-modules` and `specifier` approach. It works very well with how one would want to SSR a web component. If `css-modules` could also support the `@sheets` idea that would pretty much sum up what I'm looking for.

For example, common, rarely changing CSS could be multiple sheets in a single, cacheable file, while individual component css could be inlined. You might have something like this:

```html
<link rel="stylesheet" href="design-system.css" specifier="/design-system.css">

<my-element>
  <template shadowrootmode="open" css-modules="/design-system.css#typography /my-element.css">
    <script type="css" specifier="/my-element.css">
      :host {
        color: red
       }
    </script>
    <!-- ... -->
  </template>
</my-element>
<my-element>
  <template shadowrootmode="open" css-modules="/design-system.css#typography /my-element.css">
    <!-- ... -->
  </template>
</my-element>
```

And in JS you could also do this:

```javascript
import { typography } from "./design-system.css" with { type: "css" };
import styles from "./my-element.css" with { type: "css" };

export class MyElement extends HTMLElement {
  constructor() {
    super();
    // Elided: skip if DSD already exists.
    this.attachShadow({ mode: "open" }).adoptedStyleSheets.push(typography, styles);
  }
}

customElements.define("my-element", MyElement);
```

This should also work well for component authors who want to distribute their entire design system, providing a single, external CSS file that their customers can easily link, edit, or replace, without component code alterations needed.


-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/939#issuecomment-2195449815
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/939/2195449815@github.com>