[Proposal] Custom state pseudo class

We’d like to propose a feature enabling custom elements to expose their states with JavaScript API, and to be matched with new :state() CSS pseudo class.

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 can have various states to be in too, and web authors want to expose these states in a similar fashion as the built-in elements.

The explainer is custom-states-and-state-pseudo-class.md . This feature has been discussed at w3c/webcomponents#738, and multiple browser vendors and component providers already have a consensus on the proposal. We’d like to develop its specification in a WICG repository.


WICG provided a repository for this proposal, and we made a formal specification. https://wicg.github.io/custom-state-pseudo-class/