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

Speculation: Wouldn’t `:theme` be better served as a pseudo selector inside the shadow DOM where consumers can select one or more *themes* setting one or more matching values on a new `theme` property?

I often see authors put stylistic attributes on custom elements (such as `color` or `weight`) and then consuming authors have to make sure to set the right stylistic attributes at the right place in the markup. For example say that a custom button has an optional `weight` attribute with `slim` and `strong` options. And my style-guide says all buttons inside tables should be `slim`, then I just have to remember to set this attribute each time I put a button inside a table. It would be much easier if I could just set a `theme` property—to something the author has carefully crafted and documented—in my stylesheet.

## Example

```css
/* inside shadow DOM */

:host {
  --background: var(--button-background, ivory);
  --color: var(--button-color, rebeccapurple);
  --color-disabled: var(--button-color-disabled, thistle);
}

:theme(danger) {
  --background: var(--button-bakground-danger, mistyrose);
  --color: var(--button-color-danger, firebrick);
}

button {
  background: var(--background);
  border: 2px solid currentcolor;
  color: var(--color);
  padding: 0.5ex 1em;
}

button:disabled {
  --background: var(--background-disabled);
  --color: var(--color-disabled);
}

:theme(slim) button {
  background: transparent;
  border: none;
  padding: 0;
  text-decoration: underline;
}

:theme(strong) button {
  background: var(--color);
  border-color: var(--color);
  color: white;
}
```

Then a consumer can write:

```
table my-button {
  theme: slim;
}

.danger-zone my-button {
  theme: danger;
}

dialog my-button[type="submit"] {
  theme: strong primary;
}
```

## Why not `::part`?

This gives the author of the custom element more power to carefully craft well designed elements using multiple properties on one or more child elements. With `::part` consuming authors would need to copy and paste some of these styles, and be careful not to mix colors from different color scemes, and then apply on different shadow parts. Consuming authors would have an easier time selecting one or more of the documented themes.

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

Received on Thursday, 16 April 2020 12:53:08 UTC