[css-scoping-1] Specificity of :host, ::slotted, and :host-context doesn't seem to be defined?

[emilio]

Which is important for cascade order.

I think there are similar issues with other selectors like :matches and such, but those seem to have been resolved (I think?) and now matches is defined as:

The specificity of a :matches() pseudo-class is replaced by the specificity of its selector list argument. (The full selector’s specificity is equivalent to expanding out all the combinations in full, without :matches().)

Anyway. Blink calculates it dynamically based on the biggest specificity of the compound selectors that match. But as far as I can tell there's no spec that defines this (sorry if I overlooked it).

There's a problem with calculating specificity dynamically, which is that doing it converts the specificity not in just a function of the selector, but also in a function of the element, which is unfortunate (specially since that affects style sharing, since you can't assume that proving you match all the same selectors you have the same style, you also need to prove you match the exact same sub-selectors).

Also, doing it in a way that is not inconsistent requires matching through all the selectors, instead of just one, which isn't particularly great, but also not a big deal I suppose.

[Loirooriol]

Related: #1027 and #1170

[tabatkins]

My thought was just that it would have the standard specificity of a pseudo-class, and the contained selector wouldn't matter; that's why nothing else is specified, so it's covered by the Selectors default.

[emilio]

My thought was just that it would have the standard specificity of a pseudo-class, and the contained selector wouldn't matter; that's why nothing else is specified, so it's covered by the Selectors default.

That definitely works for me, but it's not what Blink implements, nor WebKit, cc @rniwa

[emilio]

@lilles do you have any opinion here?

[lilles]

Having the same specificity for the two rules below sounds unfortunate to me as I can imagine you'd want to do host overrides on classes/attributes on the host element, but I don't know to what degree it's used in practice:

:host(.pink) { color: pink }
:host { color: green }

[notwaldorf]

I have seen pairs of :host {...} and :host{.pink} selectors for custom elements for theming apps, so I definitely think that's a case to consider.

[emilio]

Sure. This is only relevant if :host came later of :host(.pink), but I agree. I just want to get this spec'd. Presumably this can be resolved at the same time as #2271, and ideally with #2158, to avoid going back to eternal discussion like #1027.

[css-meeting-bot]

The Working Group just discussed Specificity of :host, ::slotted, and :host-context doesn't seem to be defined?, and agreed to the following resolutions:

• RESOLVED: Account for the specificity of the selector item and change the spec to say pseudo elements have same specificity of pseudo classes.

The full IRC log of that discussion

<dael> Topic: Specificity of :host, ::slotted, and :host-context doesn't seem to be defined?
<dael> github: https://github.com//issues/1915
<dael> emilio: Also if we want to keep it. Per spec this has spec of normal pseudo class, but there's a request to effect specificity of selector. I Impl the spec, but blink and webkit don't touch slotted....whatever we decide I'm fine.
<dael> TabAtkins: Should be consistent.
<dael> Rossen: Anyone have a preference?
<dael> rune_: I can't see why we would do it differently
<dael> dbaron: pseudo class vs pseudo element?
<dael> TabAtkins: No, a selector with a pseudo eleemnt add specififity.
<dael> dbaron: Match different things.
<dael> emilio: slotted does that.
<dael> dbaron: Add pseudo elements to specificity
<dael> TabAtkins: Like pseudo class when you can opt in to specila specificity
<dael> TabAtkins: Should change selectors to ask spec of pseudo element defaulting to none at all.
<dael> TabAtkins: Servo asked for it explicity with a similar example.
<TabAtkins> https://github.com//issues/2271
<dael> TabAtkins: I'm okay resolving that we make all these psuedo classes have the specificity of their elements and clarify pseudo elements can have the specificity.
<dael> dbaron: The reason pseudo elements don't have specificity if you have a :before nothing before cna matc so there's no point in changing specificity when you have exactly one. You can change pseudo elements to have a class level specificity.
<dael> TabAtkins: Seems fine.
<dael> Rossen: Prop:
<dael> emilio: Accounting for the specificty of the selector item and change the spec to say pseudo elements have same specificy of pseudo classes.
<dael> emilio: If you have slotted div the spec would be the class?
<dbaron> Interesting, CSS1 said pseudo-elements count as *elements*: https://www.w3.org/TR/CSS1/#cascading-order
<dael> TabAtkins: It would be the same.
<dael> emilio: Override it.
<dael> Rossen: Objections?
<dael> RESOLVED: Account for the specificity of the selector item and change the spec to say pseudo elements have same specificity of pseudo classes.