W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2018

[csswg-drafts] [css-shadow-parts-1] Can class name selectors apply to a part? (#3431)

From: Jan Miksovsky via GitHub <sysbot+gh@w3.org>
Date: Tue, 11 Dec 2018 22:06:56 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-389974494-1544566014-sysbot+gh@w3.org>
JanMiksovsky has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shadow-parts-1] Can class name selectors apply to a part? ==
We're experimenting with the shadow part support in Chrome (behind the flag), and have a number of situations where we'd like to conditionally style parts based on the state of the relevant part.

E.g., we have a [Tabs](https://component.kitchen/elix/Tabs) component, and would like to expose the tab buttons as parts for styling. Significantly, the selected state of the tab button is relevant to styling, i.e., a selected tab button should look different than an unselected tab button.

The selected state of the tab button is not reflected in any existing pseudo-class. (While it'd be theoretically possible to reimplement the tab buttons as check boxes to expose the `:checked` pseudo-class, that's an extremely awkward approach just to get some styling.)

Short of having some way for components to expose custom pseudo-classes, we were wondering if it'd be possible to access classes on a part: e.g.,

```
my-tabs-component::part(tab-button) {
  color: black;
}

my-tabs-component::part(tab-button).selected {
  color: red;
}
```

Here the component author communicates part state to the outside world by applying CSS classes to the parts.

It's not explicitly indicated in https://drafts.csswg.org/css-shadow-parts/#part, but our experiments in Chrome at least suggest that the above is not supported. That places hard limits on how customizable we can make our components, even when `::part` is widely supported.

It doesn't seem like supporting class selectors on a part leaks much critical information or would produce brittle components. If the component author needs to refactor their component's shadow tree — e.g., to replace one type of shadow element with a different type of element — it'd be safe for them to support the same class names on the new element.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3431 using your GitHub account
Received on Tuesday, 11 December 2018 22:06:57 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:40 UTC