← 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

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

View on chromestatus.com