[csswg-drafts] [css-shadow-parts-1] Allow ::part(foo bar) to mean has "foo" *and* "bar" in part attribute (#3502)

tabatkins has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shadow-parts-1] Allow ::part(foo bar) to mean has "foo" *and* "bar" in part attribute ==
In #3431 (and elsewhere I've seen), people have asked for the ability to expose "states" on parts, such as indicating the "selected" part when there are several parts with the same name.

Right now the only way to indicate this is by adding another part name indicating the state; if you have `part="tab"`, for example, changing it to `part="tab tab-selected"`.

This works, but it's clumsy. You can only really indicate a single, mutually-exclusive state variable like this; if you have two states that can independently apply, either you have to pretend they don't (only having `"tab tab-hover tab-focus"`) or you have to manually combine them (`"tab tab-hover tab-focus tab-hover-focus"`).  (And then you either have to arbitrarily decide what order they appear in when they're combined, or add *all* the orders!)

This was one of the problems we had with `@apply`, too - you had to bake the "state" names into the custom property name, and thus ran into the exact same problems.

Avoiding this is easy. Just allow ::part() to accept one *or more* part names, and it matches a part only if it contains all the specified part names. So the component author just needs to add `part="tab hover focus"` and then users can match it with `::part(tab hover)` if they want.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3502 using your GitHub account

Received on Friday, 11 January 2019 18:34:50 UTC