← Back to release summary

CSS custom state new :state() syntax

Category

DOM

Type

Chromium catches up

Status

Enabled by default (Chrome 125)

Intent stage

None

• Breaking change: No
• Enterprise impact: None
• Chromium flag: CustomStatePseudoRename
• Spec maturity: Published standard
• Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/custom-elements/state?label=experimental&label=master&aligned

Summary

This is the new syntax for the CSS custom state feature for custom elements. The old syntax, :--foo, is being deprecated and removed. This new syntax, :state(foo), is shipping in WebKit. Deprecation for old syntax: https://groups.google.com/a/chromium.org/g/blink-dev/c/JvpHoUfhJYE Spec for new syntax: https://github.com/whatwg/html/pull/8467

Motivation

The custom state pseudo-class allows custom element authors to expose their own pseudo-classes for developers to target in CSS.

Standards & signals

• Specification: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class
• Firefox: No signal — I believe this is being implemented in gecko by Keith.
• Safari: Shipped/Shipping
• Web developers: No signals

Ecosystem

• Web Platform Tests: https://wpt.fyi/results/?q=custom-elements%2Fstate
• Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
• GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
• chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20custom%20state%20new%20%3Astate()%20syntax
• MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20custom%20state%20new%20%3Astate()%20syntax
• Baseline status: https://webstatus.dev/?q=CSS%20custom%20state%20new%20%3Astate()%20syntax

View on chromestatus.com