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

This is the only thing stopping me to build a perfect solution. It would be great if we had something like:

## External Module

index.html
```
<link as="style" rel="modulepreload" href="./app.css">
....
<style type="module" href="./app.css">
```
app.js (when not loaded in main html and dynamically loaded, we want to lazy get the css file)
```
import('./app.css', { with: { type: 'css' } })
 .then(module => {
    this.shadowRoot.adoptedStyleSheets = [module.default];
});
```

## Internal Module
index.html
```
<style type="module" id="styles-app">
:host { 
  background-color: red;
}
</style>
```
app.ts (when it is in the dom, we want to add it to the adoptedStyleSheet)
```
    this.shadowRoot.adoptedStyleSheets = [document.getElementById('styles-app').content];
```
That way the DOM parsing would be blocked until the CSS loads.

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

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