1866351 - :state() should be allowed after ::part()

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, enhancement)

Description

[Keith Cirkel]

Currently ::part(foo):state(bar) is a parse failure.

Comment 1

[Keith Cirkel]

Attachment: Bug 1866351 - allow :state() after ::part() r=emilio

Comment 2

[Sebastian Zartner [:sebo]]

I think that would be worth mentioning in the description of ::part and in its browser compat data.

Do other browsers already support that?

Sebastian

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cb26831dfc54
allow :state() after ::part() r=emilio

Comment 4

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/43490 for changes under testing/web-platform/tests

Comment 5

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/cb26831dfc54

Comment 6

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 7

[Hamish Willee]

MDN docs tracking for this is here https://github.com/orgs/mdn/projects/12/views/6?pane=issue&itemId=49800847

This states that FF122 supports :state() after ::part(), so from the proposal ElementInternals's states property and the :state() pseudo class we see stuff like this:

question-box::part(checkbox):state(checked) { color: green; }

But my understanding is that :state() didn't make it to the Custom State Pseudo Class spec which uses the :--state_ident_name syntax to select a state. So the above ended up being:

question-box::part(checkbox):--checked { color: green; }

So a few questions:

• Did :state() make it into the spec and I'm missing it? If not, presumably it should be removed from https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes ?
• What was actually implemented by this PR - support for part(ident) :--state_ident_name ?
• Docs cover the states in https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet#interaction_with_css (thinly) but don't mention part(). So presumably we need to add and example selecting against an identified part here too?
• This change was FF122 right?

Comment 8

[Keith Cirkel]

Did :state() make it into the spec and I'm missing it?

It went back and forth but ultimately the conclusion was to use :state(). See related HTML spec PR: https://github.com/whatwg/html/pull/8467, MDN docs PR: https://github.com/mdn/content/pull/31258.

What was actually implemented by this PR - support for part(ident) :--state_ident_name ?

::part() and :state() are separate, and were implemented in separate issues/PRs. This issue/PR implemented the facility to parse & select for those selectors combined, e.g. ::part(foo):state(bar). Specifically, while :state() parsing was handled in https://bugzilla.mozilla.org/show_bug.cgi?id=1861466, this bug and PR lifted the gate on allowing :state() after ::part().

So presumably we need to add and example selecting against an identified part here too?

Sounds good to me.

This change was FF122 right?

I believe so.

Comment 9

[Hamish Willee]

FYI I've marked this as dev-docs-complete as the bulk of the work has been done and we're in late phase review/fixes. @keith - thanks so much for all the help, advice, and rework.