In my previous articles “Web Components Can Now Be Native Form Elements” and “Native Form Validation Of Web Components”, I wrote about the ElementInternals property that enables Custom Elements to be associated with a form.
This interface also enables developers to associate custom states with Custom Elements and style them based on these states.
The states property of ElementInternals returns a CustomStateSet that stores a list of possible states for a Custom Element to be in, and allows states to be added and removed from the set.
Each state in the set is represented by a string that has the same form as a CSS Custom Property, namely--mystate.
These states can then be accessed from CSS with the custom state pseudo-class in the same way that built-in states can be accessed.
For example, a checkbox that is checked can be accessed from CSS using the built-in :checked pseudo-class