[css-shadow-parts-1] Allow ::part(foo bar) to mean has "foo" *and* "bar" in part attribute #3502
Description
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.