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

I think the whole thing could be solved (in a non-automated way) with usage of this approach.

```js
import { baseGlobalStyles } from "some/agreed/upon/path/to/global/base/styles.css" with { type: "css" };
import { internalStyles} from "./internalStyles.css" with { type: "css" };
import { styleOverrides } from "some/agreed/upon/path/to/buttonOverrides.css" with { type: "css" };

export SomeButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.adoptedStyleSheets.push(baseGlobalStyles);
    this.shadowRoot.adoptedStyleSheets.push(buttonStyles);
    this.shadowRoot.adoptedStylesheets.push(styleOverrides);
  }

  render () {
    // class selector can exist in either internalStyles or buttonOverrides or both.
    return <button class="primary">click me<button>
  }
}
```

But I think that devs probably want a more automated way to do this that less dependent on things like importmaps and previously agreed upon and documented paths to the right file with the right name, etc. Especially in the first-party component case where the component dev and the app dev are the same person.

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

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