Intent to Ship: Single <compound-selector> for :host(), :host-context()

[Anders Hartvoll Ruud]

Contact emails

and...@chromium.org

Specification

https://drafts.csswg.org/css-scoping/#selectordef-host-function

Summary

In Blink's implementation of the :host() and :host-context() pseudo-classes, a <compound-selector-list> is accepted. This is not per spec (although it was at some point): they should accept a single <compound-selector> only.

The motivation behind this change is primarily to remove our "dynamic specificity" implementation, which adds unnecessary complexity to the selector matcher. A previous version of the spec (which allowed <compound-selector-list>) said that the specificity of :host()/:host-context() is (based on) the specificity of the argument that caused the match, in other words, the specificity of those selectors can't be "statically analyzed", but change dynamically according to what is matched. We still implement this, and it's very annoying.

Removing the option for <compound-selector-list> also automatically removes the "dynamic specificity" behavior, since then the "dynamic specificity" would then only have one argument to choose from anyway.

Blink component

Blink>CSS

TAG review

N/A

TAG review status

Not applicable

Risks

Interoperability and Compatibility

UseCounters:

These counters count whenever :host() or :host-context() is parsed with more than one <compound-selector>. (I was apparently not smart enough to only count the cases where those selectors actually match something instead, which would have produced smaller numbers).

CSSPseudoHostCompoundList - 0.01%

CSSPseudoHostContextCompoundList - 0.001%

I've had a look at the HTTPArchive data for these two use-counters. Breakage seems very minor to me (see appendix for details). Most "offending" rules are never used (home-assistant.io and duplicates), invalid selectors (englishcentral.com and duplicates, this wouldn't even have been counted if I had been better at use-counting) or nonfatal (thyssenkrupp and duplicates). This is not really that surprising, since :host(<compound-selector-list>) won't work well cross-browser.

The only case where I managed to find an actual match for any of these selectors was CSSPseudoHostCompoundList, case 12. This I2S would change the focus appearance in that case.

Of course, just because I can't find it doesn't mean it's never used, but regardless my impression is that this change will not break the internet.

Gecko: Shipped/Shipping - already follows spec.

Note that :host-context() is not implemented in Gecko.

WebKit: Complicated.

Appears to support :host(<compound-selector-list>) parse-time, but then selector-matching time only the first <compound-selector> is used.

I commented on bug 199170, which would have the WebKit implementation move in the wrong direction. (The Chrome direction). It was resolved as INVALID shortly afterwards by the WebKit team.

I filed bug 222733 to move the WebKit implementation in the right direction.

Note that :host-context() is not implemented in WebKit.

Web developers: No signals

Is this feature fully tested by web-platform-tests?

Haven't checked. Adding tests for this is trivial. If it turns out to be missing, I'll add a test when implementing the change.

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1143404

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5755183847964672

This intent message was generated by Chrome Platform Status.

Appendix: HTTPArchive Investigation

CSSPseudoHostCompoundList

1. https://demo.home-assistant.io/

:host([graphic=avatar],[graphic=medium],[graphic=large],[graphic=control]) .mdc-list-item__graphic {
  margin-left:0;
  margin-right:var(--mdc-list-item-graphic-margin, 16px);
}

Doesn't appear to ever match anything.

2. https://jeszcolubisz.poradnikzdrowie.pl/

:host(.pwc-disabled,.pwc-loading){
  pointer-events:none;
  opacity:.6;
}

Can't get this to match anything either.

3. https://md.rereadgames.com/#new

Same as (1), probably the rule comes from a framework of some sort.

4. https://decks.rereadgames.com/

Same as (1).

5. https://www.lablup.com/home

Same as (1).

6. https://cloud.backend.ai/

Same as (1). Although this site requires login so I can't really test it.

7. https://meetings.vonage.com/

:host([unelevated][connotation=cta i], [outlined][connotation=cta i]){
  --vvd-connotation-background:var(--vvd-color-cta-background);
  --vvd-connotation-foreground:var(--vvd-color-cta-foreground);
}

I could not find --vvd-connotation-background/foreground actually used anywhere, but if they *are* used, this change would cause the usage sites to instead behave as "unset". If we're unlucky that might mean text becomes unreadable.

8. https://client.nelbo.com/login/

Same as (1).

9. https://my.jive.com/

Has several rules which create pseudo-elements:

:host([position=left-start], [position=left-center], [position=left-end]) .popover::before {
  border-left-color: var(--goto-border);
}

These pseudo-elements would with this change not appear at all. The site requires login, so I can't test in detail.

10. https://www.wasfati.ae/

Same as (1).

11. https://app.thedinnerdaily.com/

Same as (1).

12. https://www.fuento.de/

:host(.focus-visible,:focus-visible):focus{
  cursor:pointer;
  outline:none;
  background-color:var(--fuento-menu-item-backgroundColor,var(--fuento-ui-color-primary-focus));
}

This will definitely break something, since the selector is matching the :focus-visible part when I tab through the elements on the site. Probably not fatal though, since we'd likely get the UA-defined outlines etc instead.

13. https://ancill.app/

Same as (1).

CSSPseudoHostContextCompoundList

1. https://ko.englishcentral.com/

:host-context(.ja,.tr,.ko) >>> .or

ShadowDOMv0 selector, not valid anymore.

2. https://ru.englishcentral.com/

Same as (1).

3. https://enterprise.udacity.com/

:host-context(.corporate-term-details,.nd-syllabus-term__cards) .countdown__timer {
  font-size:1rem;
  line-height:28px;
  line-height:1rem!important;
  height:1rem;
}

I do see a .countdown__timer, but it's not in a shadow tree, so this rule never matches. In fact, this site doesn't appear to use ShadowDOM at all?

4. https://www.udacity.com/

Same as (3).

5. https://www.thyssenkrupp-schulte.de/

:host-context(:lang(fr), :lang(fr-fr)) .th-intranet .rich-text .quote p:before { content: \u00BB; }
:host-context(:lang(fr), :lang(fr-fr)) .th-intranet .rich-text .quote p:after { content: \u00BB; }

I can't get these to match anything, but then the selector does say '.th-intranet', and obviously I can't access their intranet. In any case, it looks like the worst that can happen here is that "nice quotes" are lacking their quotes.

6. https://wfm-toa-web1.ultipro.com/

Page is mostly blank, and requires login. Can't really test it.

7. https://www.thyssenkrupp-materials.be/

Same as (5).

8. https://tr.englishcentral.com/

Same as (1).

9. https://www.thyssenkrupp-system-engineering.com/

Same as (5).

10. https://www.englishcentral.com/

Same as (1).

11. https://www.thyssenkrupp-plastics.fr/

Same as (5).

12. https://www.thyssenkrupp-infrastructure.com/

Same as (5).

13. https://ja.englishcentral.com/

Same as (1).

14. https://www.thyssenkrupp-materials-na.com/

Same as (5).

15. https://www.thyssenkrupp-berco.com/

Same as (5).

16. https://www.thyssenkrupp-materials-services.com/

Same as (5).

[Alex Russell]

Thank you for the detailed investigation from HTTP Archive regarding the compat risks.

LGTM1

[TAMURA, Kent]

LGTM2.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
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/83875d38-4884-494d-95e2-2fef094e809fn%40chromium.org.

--

TAMURA Kent
Software Engineer, Google

[Chris Harrelson]

LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAGH7WqEpPOvDRk5%2BxggPQrQxj%2BGGOSeUqATX6v%3DM4kroSzaoUw%40mail.gmail.com.

[Daniel Bratell]

Bonus LGTM4. Very good risk analysis!

/Daniel

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw_nUAFjk4wSWxLFNjodEcxNRtTfO3ujHJTGyq8o_%3Dj9vA%40mail.gmail.com.

[Manuel Rego Casasnovas]

Thanks for the detailed risks analysis, this LGTM to me too but you have
too many already. :-)

On 05/03/2021 11:39, Anders Hartvoll Ruud wrote:
>
> Is this feature fully tested by web-platform-tests

> <https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md>?

>
> Haven't checked. Adding tests for this is trivial. If it turns out to be
> missing, I'll add a test when implementing the change.

I couldn't find a test for this, so please add the usual parsing tests like:
* css/selectors/parsing/parse-host.html
* css/selectors/parsing/parse-host-context.html

Cheers,
Rego