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

> Lastly, I want to highlight [w3c/csswg-drafts#10013](https://github.com/w3c/csswg-drafts/issues/10013), which was recently greenlit. It may sound unrelated, but in my mind it opens up the potential for these two syntaxes to refer to the exact same stylesheet instance:
> 
> ```
> <link rel="stylesheet" href="design-system.css#button">
> ```
> 
> ```js
> import buttonStyles from "design-system.css#button" with { type: "css" };
> ```

@mayank99 has there explicitly been discussion to date that implied that files included via `rel="stylesheet"` will make it onto the module graph so that they are not requested multiple times. I'd love to join that conversation! The way that opens an alternate version of the above where in a file full of `@sheet` fragments could be included via `rel="stylesheet"`:

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

While being added to the module graph so that extended usage of the same in JS would essentially be `modulepreload`ed for use like:

```js
import { button as buttonStyles } from "design-system.css" with { type: "css" };
import element from '/my-element.css' with { type: 'css' };

class El extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.adoptedStyleSheets = [buttonStyles, elementStyles];
  }
}
```

Would be awesome!

Passing that same theoretical approach to developers using DSD would be important to ensure that they can share learned concepts between the HTML-first or JS-first implementations of a shadow root.

```html
<my-element>
  <template shadowrootmode="open" adoped-style-sheets="/design-system.css#button /my-element.css">
    <!-- ... -->
  </template>
</my-element>
```

Expanding this to include inline `<style>` elements completes the picture, no matter how you prefer to write you application:

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

<style type="module" href="/my-element.css">
   // styles
</style>

<my-element>
  <template shadowrootmode="open" adoped-style-sheets="/design-system.css#button /my-element.css">
    <!-- ... -->
  </template>
</my-element>

<script type="module">
  import { button as buttonStyles } from "design-system.css" with { type: "css" };
  import element from '/my-element.css' with { type: 'css' };

  class El extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({mode: 'open'});
      this.shadowRoot.adoptedStyleSheets = [buttonStyles, elementStyles];
    }
  }
</script>
```

😍 

_Editors note: APIs and attribute name FPO only!_





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

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