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

Another option instead of - or maybe in addition to - cross-scope refs is to allow inlining of all module types, keying them by URL that adds them to the module cache as if they had been imported. This would allow a page to render with the necessary CSS modules, attach them to the correct scopes, and later to load JS modules that import them without double-loading them.

`<script>` tags with `type` values that match import assertion types would support a new attribute that gives the specifier/URL. Something like:

```html
<script type="css" specifier="/foo.css">
  :host {
    color: red
   }
</script>
```

A later import: `import styles from '/foo.css' assert {type: 'css'}` would load the CSS module script defined by the tag.

Full example:

```html
  <my-element>
    <template shadowroot="open" css-modules="/foo.css /bar.css">
      <script type="css" specifier="/foo.css">
        :host {
          color: red
         }
      </script>
      <!-- ... -->
    </template>
  </my-element>
  <my-element>
    <template shadowroot="open" css-modules="/foo.css /bar.css">
      <!-- ... -->
    </template>
  </my-element>
```

This would have to be made coherent with import maps, but it would allow a page to be rendered with correct scoped styles w/o FOUC and w/o duplication of CSS text.

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