Intent to Ship: :has-slotted pseudo selector

[Chromestatus]

Contact emails

chro...@keithcirkel.co.uk, keit...@github.com

Explainer

https://drafts.csswg.org/css-scoping/#the-has-slotted-pseudo

Specification

https://drafts.csswg.org/css-scoping/#the-has-slotted-pseudo

Summary

The :has-slotted pseudo class represents a slot element with slotted content, such as a text node or element. This can be used to style elements based on whether or not they are using slot fallback content.

Blink component

Blink>DOM>ShadowDOM

TAG review

https://github.com/w3ctag/design-reviews/issues/999

TAG review status

Issues addressed

Risks

Interoperability and Compatibility

None

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1079)

WebKit: Support (https://github.com/WebKit/standards-positions/issues/404)

Web developers: Positive

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

None

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

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

Yes

Flag name on about://flags

None

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/369883705

Estimated milestones

Shipping on desktop	133
Shipping on Android	133
Shipping on WebView	133
Shipping on iOS	133

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5134941143433216?gate=5162696966930432

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/977a63ee-1660-4d3b-ae86-aa5eebaf3b65%40app.fastmail.com

This intent message was generated by Chrome Platform Status.

[Mike Taylor]

This looks useful, and it seems that Mozilla is positive on it as well (inferring from the comments, anyways).

Is there any reason this isn't behind a flag?

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/369883705

Estimated milestones

Shipping on desktop	133
Shipping on Android	133
Shipping on WebView	133
Shipping on iOS	133

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5134941143433216?gate=5162696966930432

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/977a63ee-1660-4d3b-ae86-aa5eebaf3b65%40app.fastmail.com

This intent message was generated by Chrome Platform Status.

--
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 visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/677f98c2.2b0a0220.275672.0658.GAE%40google.com.

[Rune Lillesveen]

On Thu, Jan 9, 2025 at 10:37 AM Chromestatus <ad...@cr-status.appspotmail.com> wrote:

Contact emails

chro...@keithcirkel.co.uk, keit...@github.com

Explainer

https://drafts.csswg.org/css-scoping/#the-has-slotted-pseudo

Specification

https://drafts.csswg.org/css-scoping/#the-has-slotted-pseudo

Summary

The :has-slotted pseudo class represents a slot element with slotted content, such as a text node or element. This can be used to style elements based on whether or not they are using slot fallback content.

I don't see that the spec says anything about querySelector, but its evaluation depends on slot assignments. Should dirty slot assignments be updated before running querySelector?

I see the implementation does not currently update the assignments. Since our implementation updates slot assignments lazily as needed, what querySelector matches will depend on which other APIs were invoked since the last rendering update.

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

Yes

Could you add the test links to the chromestatus entry?

Looking at wpt.fyi all tests are tentative, so they need to be made non-tentative with proper spec references if they match the spec.

The spec does not match flattened nodes, but there are tests that are named "flattened" which is confusing. For instance, IIUC, https://wpt.live/css/css-scoping/has-slotted-flattened-001.tentative.html should match the selector because a slot is assigned to another slot, not because nodes are flattened through.

Estimated milestones

Shipping on desktop	133
Shipping on Android	133
Shipping on WebView	133
Shipping on iOS	133

134?

--

Rune Lillesveen

[Keith Cirkel]

> Is there any reason this isn't behind a flag?

Apologies Mike, I've edited the feature status to reflect that it is indeed behind a flag right now. It's in the Experimental Web Platform Features group and has been since M131.

> I don't see that the spec says anything about querySelector, but its evaluation depends on slot assignments. Should dirty slot assignments be updated before running querySelector?

Thanks Rune, I think you're right, we should definitely fix this so it is not observable.

> Could you add the test links to the chromestatus entry?

Thanks for calling this out, done!

> Looking at wpt.fyi all tests are tentative, so they need to be made non-tentative with proper spec references if they match the spec.

Thanks for mentioning this, I've got a PR for this: https://github.com/web-platform-tests/wpt/pull/50056

> The spec does not match flattened nodes, but there are tests that are named "flattened" which is confusing. For instance, IIUC, https://wpt.live/css/css-scoping/has-slotted-flattened-001.tentative.html should match the selector because a slot is assigned to another slot, not because nodes are flattened through.

I'm bringing a question on this to the CSSWG this week to ensure the spec references that the lookup should use the flat tree, and the tests and logic is updated accordingly.

> 134?

Updated to 134.

[Rune Lillesveen]

On Mon, Jan 13, 2025 at 7:38 PM Keith Cirkel <chro...@keithcirkel.co.uk> wrote:

> I don't see that the spec says anything about querySelector, but its evaluation depends on slot assignments. Should dirty slot assignments be updated before running querySelector?

Thanks Rune, I think you're right, we should definitely fix this so it is not observable.

FWIW, the slot assignments are made up-to-date for querySelector with :dir() and auto directionality (tested with Chrome and Firefox), but I cannot find anything in the spec calling this out specifically:

<!DOCTYPE html>
<div id="host">
  <template shadowrootmode="open">
    <style>
      slot:dir(rtl) { background-color: green; }
    </style>
    <slot dir="auto"></slot>
  </template>
  <div id="auto_div" slot="no">&rlm;</div>
</div>
<script>
  const root = host.shadowRoot;
  const slot = root.querySelector("slot");
  console.log(root.querySelector("slot:dir(rtl)"));
  console.log(getComputedStyle(slot).backgroundColor);
  auto_div.removeAttribute("slot");
  console.log(root.querySelector("slot:dir(rtl)"));
  console.log(getComputedStyle(host.shadowRoot.querySelector("slot")).backgroundColor);
</script>

> Looking at wpt.fyi all tests are tentative, so they need to be made non-tentative with proper spec references if they match the spec.

Thanks for mentioning this, I've got a PR for this: https://github.com/web-platform-tests/wpt/pull/50056

Remember to also update the rel=help links to actual spec references.

--

Rune Lillesveen

[Chris Harrelson]

Hi Keith, is this intent ready for re-review?

--
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 visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeS1QunKZk%2Bv_Vxix9eFO-qe_xkMOMzt_jHZA20x0LFPMA%40mail.gmail.com.

[Keith Cirkel]

Not yet, I'll land a few patches this week that will tidy up the points Rune raised.

[Alex Russell]

Any updates?

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Keith Cirkel]

None yet, I’ve got to rework some of the internals but got a little busy. I’ll hopefully have some updates in the coming weeks!

[Alex Russell]

How's it going? Any updates?

[Keith Cirkel]

Sorry this has fallen off my radar a bit. I’m not sure I’m going to have time to get this resolved soon, so perhaps this can be considered paused unless anyone else is able to pick it up?