Intent to Ship: Spec compliant specificity for :host, :host-context, and ::slotted for Shadow DOM v1.
Rune Lillesveen
Contact emails
Spec
https://drafts.csswg.org/css-scoping/#host-selector
https://drafts.csswg.org/css-scoping/#slotted-pseudoSummary
Change the specificity of :host(), :host-context(), and ::slotted() to match the specification and other implementations for Shadow DOM v1.
We currently do not count the :host/:host-context pseudo class as part of specificity, but we including the specificity of its arguments. The change is adding pseudo class specificity for :host.
We currently do not count the arguments to ::slotted() as part of specificity. The change is to add the specificity of ::slotted() arguments.
So, for a div with #id, the first will start applying after this change:
::slotted(#id) { color: green }
::slotted(div) { color: red }
Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
Yes.
Risks
Interoperability and Compatibility
Shipping this will ensure interoperability between browsers since Safari and Firefox has, or is about to ship this in their stable releases (see wpt.fyi links below) which means it's a risk not shipping it.
Compatibility with sites relying on this bug can be an issue. We tried landing this for :host/:host-context in Shadow DOM v0 which broke Polymer 1.0 components in WebUI. The version of WebUI using Shadow DOM v1 does not have the same issues when testing for what was failing with v0, so shipping this for Shadow DOM v1 looks OK for WebUI. The proposal is to land this for Shadow DOM v1 only (::slotted is just in v1 anyway).
A closer look at what failed in WebUI for v0 shows that it relies on a bug in the cascading order for v0 in Blink where we end up comparing specificity of selectors from two different shadow trees. That can not happen in Shadow DOM v1.
If there is existing content affected by this change, it would have already been discovered and worked around when tested in Safari. This is confirmed by the Polymer team. The Polymer team could not come up with cases where they knew this could be an issue. There is a risk for Chrome-only content.
https://wpt.fyi/results/css/css-scoping/host-specificity-002.html?label=experimental
https://wpt.fyi/results/css/css-scoping/host-specificity-002.html
https://wpt.fyi/results/css/css-scoping/slotted-specificity.html?label=experimental
https://wpt.fyi/results/css/css-scoping/slotted-specificity.html
Edge: Does not ship Shadow DOM at all
Firefox: Firefox 63
Safari: Shipped
Is this feature fully tested by web-platform-tests? Link to test suite results from wpt.fyi.
https://wpt.fyi/results/css/css-scoping?label=experimental
In particular the tests mentioned in the interop section.
Entry on the feature dashboard
This is a bug fix for an existing feature which does not have an entry.
Philip Jägenstedt
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeSE05kYgrPELB0CqEb1fwoQd0aDVHhjj_T5a8sK4ziihw%40mail.gmail.com.
Hayato Ito
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeSE05kYgrPELB0CqEb1fwoQd0aDVHhjj_T5a8sK4ziihw%40mail.gmail.com.
Daniel Bratell
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAARdPYcmDOUxj4gDmX6pM08-D4V3%2B6uRbMpHWcAVjvr5mZ9z0w%40mail.gmail.com.
Chris Harrelson
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/op.zqe7zbymrbppqq%40cicero2.linkoping.osa.
Rune Lillesveen
LGTM3Please add an entry to the chromestatus dashboard, so that developers can more easily find answers to questions about this change.