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

Thought I'd share some of my experiences 

## CSS frameworks

Have definitely seen cases where there is a desire to use _whatever_ css framework inside of components.  I have definitely seen the question multiple times: "how do I use bootstrap in web components".  This could just as easily be bulma, semanticUI, etc. Here is a bit of supporting evidence

- https://github.com/web-padawan/aybolit/tree/master/packages/bootstrap
- https://github.com/nik-christou/lit-element-bootstrap
- https://github.com/morbidick/bootstrap-webcomponents
- https://github.com/twbs/bootstrap/issues/28131

I've personally done some experimental stuff using bootstrap's scss directly to compile it into more modular outputs that could be used in a more a-la-carte fashion as a lit css import.  This is just an optimization trying to avoid "here's everything in the world" you'd get from `bootstrap/dist/*.css`.

Presumably some component that was using bootstrap css in this way would be following all of the bem semantics and dom structure required by bootstrap.... it literally depends on bootstrap

In a case like this, something like the snippet above might make sense since the component knows that it needs some very specific stylesheet (semver matters too)

```javascript
this.attachShadow({
  mode: 'open',
  styles: [stylesheetPointer] // array of pointers to specific stylesheets?
});
```

Effectively that isn't much different from being able to `import bootstrapCss from 'hypoethetical-bootstrap'` and attaching that to your own shadow root.


## Theming Component Libraries

Often times we're using component libraries that are custom elements, eg:  polymer-paper-element, material-components-web-components, vaadin, spectrum-web-components, etc.  In these cases, inversion-of-control is needed.  

- css custom properties
- css part ( / css theme?)
- https://github.com/adobe/spectrum-web-components/tree/main/packages/theme
  - ability to scope custom properties
- https://github.com/vaadin/vaadin-themable-mixin
  - ability to inject complex style sheets eg: lumo theme vs material theme
- https://jelements.netlify.app/stylable-mixin
  - improved v-themable-mixin
- https://jelements.netlify.app/light-style-element
  - seems especially relevant to the idea of styling non-shadow-dom elements
  - references https://github.com/WICG/webcomponents/issues/468

The vaadin-themable-mixin here is sort of similar to the snippet above -- some styles are attached to the shadow root, but - unlike the example above where the component knows it wants to use bootstrap - the styles that end up being bound are unknown to the component author.  Borrowing that same snippet, it might look something like this:

```javascript
this.attachShadow({
  mode: 'open',
  styles: [this.resolveStyles()]
});
```

In the case of the v-themable-mixin.. those resolved styles have a limitation that they, for a given class, are resolved once and only once, they are a static part of the class thereafter.  Effectively, the `resolveStyles` impl says "find any style module that says' it's for my class (x-foo)".

I've also personally had some cases where I do want every "x-foo" element to look a certain way... but inevitably there are edge cases that require _this particular instance to be a bit different_.  I would _not_ want to pay the cost of every single instance on the app needing a bunch of css just for this one particular case.  Being able to provide scoping and/or instance styles would be ideal.  I've done some experimental stuff w/ a lit-element subclass that allows instance styles to super-cede the class's static styles [here](https://stackblitz.com/edit/9dxcpx?file=my-element.ts)

In terms of scoping/providing those instance styles, the naive idea I've been kicking around is one where the connectedCallback would dispatch a composed, bubbling event and an ancestor could capture the event and inject styles... obviously there are some problems with this


-- 
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/909#issuecomment-797166894