Re: [WICG/webcomponents] "open-stylable" Shadow Roots (#909)

Just a quick note that I believe the headless scenario should already be handled by proposals that have shipped or that are moving forward. Essentially, one can combine import maps with the ability to have multiple sheets exported from a style sheet, and that would allow headless or pre-styled design systems to be re-styled by an external stylesheet. Of course, the system would need to be written to use these features, and it obviously doesn't address the other use cases. But I thought it important to keep in mind how this combination of features can help with some of the use cases already.

#### `@headless/button.js`

```js
import { buttonStyles} from "@headless/styles.css" with { type: "css" };

export HeadlessButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).adoptedStyleSheets.push(buttonStyles);
  }
}
```

#### `importmap.json`

```json
{
  "imports": {
     "@headless/styles.css": "./my-styles.css"
  }
}
```

#### `my-styles.css`

```css
@sheet buttonStyles {
  ...your custom styles here...
}
```

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

Message ID: <WICG/webcomponents/issues/909/1937326520@github.com>