Examples don't work

[RowanDZ]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet

What specific section or headline is this issue about?

Examples

What information was incorrect, unhelpful, or incomplete?

Examples do not work

What did you expect to see?

Working examples

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

They give:

SyntaxError: Failed to execute 'add' on 'CustomStateSet': The specified value 'checked' must start with '--'.

MDN metadata

Page report details

• Folder: en-us/web/api/customstateset
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/customstateset/index.md
• Last commit: 7a90327
• Document last modified: 2024-04-16T01:03:53.000Z

[minimalsm]

Hey folks :) happy to put up a fix for this.

[hamishwillee]

Thanks, but the examples do work if you try them on a browser that supports the latest syntax, such as Firefox. This is marked in the page:

This will fix itself a bit in the next few weeks as Chrome also supports the new CSS :state() syntax from Chrome 125 - mdn/browser-compat-data#23072

I appreciate this is a bit confusing based on the compatibility data. I've updated the page a bit in #33572 too.

In any case, I propose we do not modify the examples to support the syntax that is no longer allowed by the spec.

Closing this, but if you wanted we'd accept a PR that modifies the examples to check for support of the new state syntax and put a "not supported by this browser warning" when the examples don't work.