:state()
A pseudo-class for Custom Elements that allows you to style them based on custom internal states (like 'loading', 'active', or 'error') that are set via JavaScript using the ElementInternals API.
Quick example
/* Styles a custom map element when it's in a specific internal 'collapsed' state */
my-map:state(collapsed) {
height: 100px;
overflow: hidden;
}:state() Browser Support
Newly available Since 2024 85% global usage
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
125+
126+
17.4+
125+