Intent to Ship: CSS custom state new :state() syntax

[Joey Arhar]

Contact emails

jar...@chromium.org

Explainer

None

Specification

https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class

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

Blink component

Blink>HTML>CustomElements

TAG review

None

TAG review status

Not applicable

Risks

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)

Web developers: No signals

Other signals:

Ergonomics

This will be used in tandem with custom elements. This API will not make it hard for chrome to maintain good performance.

Activation

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.

Security

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?

None

Debuggability

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)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

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

Flag name on chrome://flags

CustomStatePseudoRename

Finch feature name

CustomStatePseudoRename

Requires code in //chrome?

False

Estimated milestones

DevTrial on desktop

122

DevTrial on Android

122

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 Status

https://chromestatus.com/feature/5586433790443520

This intent message was generated by Chrome Platform Status.

[Chris Harrelson]

LGTM1

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAK6btwJzbjvYUjj55%2BReonmSUKMONT5zsH3MX8Unvq3ED%2B6Qaw%40mail.gmail.com.

[Mike Taylor]

LGTM2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw86Bs%3DXkHDmHyEmnTw0W%2BESmnRqOxHN2p50azsvuaDnxA%40mail.gmail.com.

[Mike Taylor]

(but please remember to request reviews for the other review gates in chromestatus)

[TAMURA, Kent]

LGTM3.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/b21ffeb5-9870-40f6-bc97-6cc5c40bfe18%40chromium.org.

--

TAMURA Kent
Software Engineer, Google