Chrome did not count the specificity for the :host() and :host-context() pseudo classes themselves. ::slotted() did not count the specificity for its arguments. This was not specified until [1] was resolved. From M71 Chrome ships specificity calculations per spec for Shadow DOM v1. The old behavior is kept for v0 for compatibility with existing content. [1] https://github.com/w3c/csswg-drafts/issues/1915 Bugs: https://crbug.com/888042 https://crbug.com/857415
Documentation
Specification
Specification being incubated in a Community Group
Status in Chromium
Enabled by default
(tracking bug)
Consensus & Standardization
After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.
- Shipped/Shipping
- Shipped/Shipping
- No signals
Owner
Last updated on 2021-12-13
Comments
Before this change, the order of ::slotted rule would always beat the specificity of selector argument. For instance, for a div with id=myId, the last rule would apply, making the div red. With this feature shipped, the div will become green because id selectors have higher specificity than element selectors. ::slotted(#myId) { color: green } ::slotted(div) { color: red }