Re: [w3c/webcomponents] Theming options for shadow roots (#864)

__::theme() modifications__

I've got a concern with the 'old' ::theme proposal why it doesn't work:

```html
<html><body>
<style>
  ::theme(my-button) {
    color:hotpink;
  }
  ::theme(my-component1) {
    background: red;
  }
  ::theme(my-component2) {
    background: blue;
  }
  ::theme(my-component-part) {
    background: green;
  }
</style>
<my-button part="my-button">text</my-button> <!-- color: inherit ❌ -->
<my-component1 part="my-component1"> <!-- background: inherit ❌ -->
  #shadow-root
    <div part="my-component-part"></div> <!-- background: green ✅ -->
    <my-button part="my-button">text</my-button> <!-- color: hotpink ✅ -->
    <my-component2 part="my-component2"> <!-- background: blue ✅ -->
      #shadow-root
        <div part="my-component-part"></div> <!-- color: green ✅ -->
        <my-button part="my-button">text</my-button> <!-- color: hotpink ✅ -->
    </my-component2>
</my-component1>
</body></html>
```

But how can we handle those first two crosses? The idea behind `::theme` is that a frontend developer shouldn't care
about the rootNode in which the component is in, right?

In the previous draft I believe it was as follows:

- `::part` selectors pierce _only 1_ shadow boundary.
- `::theme` selectors pierce _1 or more_ shadow boundaries.

I would propose a change:

- `::theme` selectors pierce _0 or more_ shadow boundaries.

This would allow us to fix the above issue.

__Statefull components__

How should we handle internal state of a component? How can se select every `my-button[disabled]` and theme that?
Should I now _also_ publish all the state attribute of the components as parts with my own naming convention? 🤢

If we _allow_ to use selectors behind the `::theme()` bit, this would solve the issue:

```css
::theme(my-button)[disabled] {}
```

_This isn't an issue with the `::part` specification because that only pierces one boundary from the outside so you
can always select the element directly._

__Arguments agains the `@media my-component`__

It looks like a hack to 'select' elements though a shadow root? But media queries aren't selectors, they allow for
selecting based on the environment and a component isn't an environment variable. So I think we should stay with a
selector to select the webcomponent/part. Does your proposal also allow for `div`? How does a component 'whitelist'
it's self? How would a component expose certain parts of their inners?


__Style scoping__

How do we create a different theme area? For example: the content of the page is white and the footer is black, how
can we scope the themes, that also work acros shadow boundaries?

```css
dark-theme::theme(my-button) { bla:bla; }
```

The bit is the part of on the left? This can't be specified globally, because it needs to be present in every shadowRoot
for this to work (think nested themes). This would need a custom webcomponent to achieve this.

The idea is that we allow for reading CSS variables in the selector. Those cascade down so we can achieve nested
themes. I believe there currently aren't any boolean css properties, but it can still do a string match?

```css
::theme(my-button)::var(--dark-theme) { bla:bla; }
```



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

Received on Wednesday, 29 January 2020 11:34:36 UTC