Re: [csswg-drafts] [css-shadow-parts] Limited ::theme selector (#3507)

The approach @runarberg proposes is pretty much the same thing as we at Vaadin tried early on (https://github.com/vaadin/vaadin-themable-mixin/issues/12#issuecomment-327802249) as a way to control theme variant propagation and as a way for style sheet authors to have control over them instead of the HTML markup. I would very much like that to be the case, that it would be possible to choose predefined variants using a style sheet.

Unfortunately, our implementation ended up being terrible for performance and we moved back to the HTML attribute based solution.

This also reminds me of the idea @justinfagnani surfaced in another related discussion about theming shadow roots (https://github.com/w3c/webcomponents/issues/864#issuecomment-601924132). I see it as basically the same idea, but with a slightly different API. 

The API proposed here feels like it would be easier to author. I don’t know if Justin had thoughts how the author defines the mapping between the “logical properties” and the final properties it is expanded into?

Comparing the two, from a consumer perspective:

```css
mwc-card {
  --material-elevation: 2;
}
```

```css
mwc-card {
  theme: material-elevation-2;
}
```

From the author perspective (shadow root of mwc-card):

```css
:host {
  /* Not sure how --material-elevation would be processed? */
}
```

```css
:theme(material-elevation-2) {
  box-shadow: var(--material-elevation-2-box-shadow);
}
```

-- 
GitHub Notification of comment by jouni
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3507#issuecomment-618213025 using your GitHub account

Received on Thursday, 23 April 2020 06:48:49 UTC