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

I'm not sure if this is the right place or if it is more related to #909 (open-stylable).
But I would hope that declarative CSS module scripts would also automatically apply to the global document. Like I said in the other issue - most of the time we want to use CSS frameworks like Bootstrap or TailwindCSS and they need to be applied to the global document.

For https://github.com/webtides/element-js/blob/main/src/StyledElement.js we are currently duplicating inlined styles to make them adoptable.

```html
<html>
<head>
<style id="globalStyles">/* all of TailwindCSS... */</style>
</head>
...
```

```javascript
const globalStyles = document.getElementById('globalStyles');

class MyElement extends HTMLElement {
    constructor() {
        const shadow = this.attachShadow({ mode: 'open' });
        const sheet = new CSSStyleSheet();
        sheet.replaceSync(globalStyles.textContent);
        shadow.adoptedStyleSheets = [sheet];
    }
}
```

I hope that it will be possible to share styles between the global document and shadow roots instead of duplicating them.

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

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

Received on Wednesday, 30 August 2023 07:13:18 UTC