← Back to release summary

Custom state pseudo class

Category
Web Components
Type
New or changed feature
Status
Enabled by default (Chrome 90)
Intent stage
Prepare to ship

Summary

The feature lets custom elements expose their states via the :state() CSS pseudo class.

Motivation

Built-in elements have certain “states” that can change over time depending on user interaction and other factors, and are exposed to web authors through pseudo classes. For example, some form controls have the “invalid” state, which is exposed through the :invalid pseudo class. Like built-in elements, custom elements may also have states, and web authors want to expose these states in a similar fashion to the built-in elements.

Standards & signals

Docs: N/A

Explainers: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/custom-states-and-state-pseudo-class.md

View on chromestatus.com