Re: [csswg-drafts] [css-shadow-parts] What's the purpose of multiple idents in ::part()? (#4412)

So you're considering `::part` as a kind of pseudo element in itself, where I see the part itself as a custom pseudo element, e.g. `::part(partname)` as morally equivalent to `::--partname` (and I'm also somewhat in favor of that syntax, so long as we align `:state(statename)` as `:--statename`). I'm not sure the 'part kind of pseudo element' distinction adds value (happy to hear your thoughts tho).

Note: I'm still fine with the part attribute of a shadow node having multiple part names, I see that as valuable where a single node can play multiple roles.

The point in drawing the distinction between `::part` and `:state` is the same point as the distinction between pseudo elements and pseudo classes. They behave differently, they have different roles/rules in selectors, and different specificity, etc. Again, I see `::part` as a mechanism to explain pseudo elements and enable them for custom elements, not a new kind of pseudo element. The same goes for `:state` and pseudo classes.

Here's a concrete example, using your calendar widget, I have day nodes that can be weekends or weekdays, and also holidays or not. I want to color weekends yellow, and holidays green:

    ::part(day):state(weekend) { color: yellow: }
    ::part(day):state(holiday) { color: green; }

but holidays on weekends I want blue:

    ::part(day):state(weekend):state(holiday) { color: blue; }

That's simple, explainable, fits with regular CSS specificity rules, and plays nice with regular classes.

Using just parts that'd be:

    ::part(day weekend) { color: yellow; }
    ::part(day holiday) { color: green; }
    ::part(day holiday weekend) { color: blue; }

which I suppose can work (depending on the outcome of #3995) but has a very different specificity than an element with two classes and is something new you have to explain.

Using `:state` also enables things like:

    ::part(day):not(:state(weekend)) { color: white; }

where with just part names:

    ::part(day):not(::part(weekend)) { color: white; }

doesn't work because `:not()` can't contain pseudo elements.


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

Received on Friday, 11 October 2019 21:08:18 UTC