Skip to content

[selectors-5] Add custom state pseudo-classes #8213

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Aug 13, 2024
Merged

[selectors-5] Add custom state pseudo-classes #8213

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f65edc0
Add custom state pseudo-classes
josepharhar Dec 9, 2022
9ca9840
Merge branch 'main' into customstate
josepharhar Sep 18, 2023
c5cbcb2
rename from :--foo to :state(foo)
josepharhar Sep 18, 2023
6d86fd8
keith's suggestion
josepharhar Nov 8, 2023
a31bd6a
add html reference
josepharhar Jan 5, 2024
e243e60
Say that argument is case sensitive
josepharhar May 3, 2024
f2c7b40
rename custom-pseudo to custom-state
josepharhar Jun 17, 2024
d18d72f
move to overview.bs
josepharhar Jun 17, 2024
6d75e4f
fix html spec link
josepharhar Jun 17, 2024
d351d4a
revert move to overview.bs and fix html spec link
josepharhar Jul 25, 2024
a6150c8
re-do fix html spec link
josepharhar Jul 25, 2024
1d07766
Merge branch 'main' into customstate
josepharhar Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions selectors-4/deferred-for-level-5
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,3 +127,14 @@ The local link pseudo-class '':local-link''</h3>
What about if the document url has less than N segments,
and the link is same-page?
Should "null segments" count as matching, or not?

<h3 id="custom-state">Exposing custom state: the '':state()'' pseudo-class</h3>

The <dfn selector>:state()</dfn> pseudo-class takes a case-sensitive argument
and matches custom elements whose exposed custom states include the argument.

The grammar of the '':state()'' pseudo-class is:

<pre class=prod>:state( <ident> )</pre>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Existing WPTs & impls make this case sensitive so:

Suggested change
<pre class=prod>:state( <ident> )</pre>
<pre class=prod>:state( <custom-ident> )</pre>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suspect we don't want the exclusion of CSS-wide keywords that <custom-ident> implies; I think we have at least some amount of consensus that such exclusion was a bad idea in the first place and places that needed it should be using <dashed-ident> instead, and that <custom-ident> was a mistake. But on the other hand we should clearly document the case-sensitivity. I'm not sure what the current best practice is.

(I can't find any reference for this longer than #7431 (comment) but there might be a more detailed explanation somewhere.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so should we do <dashed-ident> for now...? or keep it as <ident>?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<dashed-ident> is definitely wrong as this can take any ident. I suppose <ident> is right from a strictly grammar standpoint because, as @dbaron points out, it doesn’t exclude css wide keywords. <ident> claims case insensitivity though. Perhaps we could make a new token type here like <cased-ident>. Otherwise we should keep it as <ident> and either explain (or remove) the implementation handles cases discretely.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure what is best here. @tabatkins can you advise?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can’t find the reference to case insensitivity now.

The string given to customstateset can be dashed so should this be <ident> | <dashed-ident>?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, <dashed-ident> is a subset of <ident>, so just <ident> is sufficient.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok so since i'm currently using <ident> can we merge this?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you should add a sentence saying it's case-sensitive. (unless @tabatkins disagrees, at least.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I amended the first sentence to say that the argument is case sensitive


The exact matching behavior of '':state()'' pseudo-class is defined by the host language. See <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class">HTML's definition</a>.