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
TAG review statusNot applicable
Interoperability and Compatibility
The new syntax will not have any interop or compat risks. WebKit has enabled the new syntax by default. I will implement and ship the new syntax alongside the old syntax so that developers can have access to both at the same time on stable and migrate to the new syntax.Gecko
: No signal (https://bugzilla.mozilla.org/show_bug.cgi?id=1588763
) I believe this is being implemented in gecko by Keith.WebKit
: Shipped/Shipping (https://github.com/WebKit/WebKit/pull/22223
: No signalsOther signals
This will be used in tandem with custom elements. This API will not make it hard for chrome to maintain good performance.
Developers will be able to take advantage of this feature immediately. Documentation and outreach could be useful for the deprecation of the old syntax and migration to the new syntax.
There are no security/privacy risks for this CSS feature.
WebView application risks
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
Styles applied by the custom state pseudo classes will appear in the styles sidebar of DevTools.
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?YesYes
Flag name on chrome://flagsCustomStatePseudoRename
Finch feature nameCustomStatePseudoRename
Requires code in //chrome?False
Anticipated spec changes
Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).None
Link to entry on the Chrome Platform Statushttps://chromestatus.com/feature/5586433790443520