Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The states read-only property of the ElementInternals interface returns a CustomStateSet representing the possible states of the custom element.
A CustomStateSet which is a Set of strings.
The following function adds and removes the state --checked to a CustomStateSet, then prints to the console true or false as the custom checkbox is checked or unchecked.
class MyElement extends HTMLElement {
set checked(flag) {
if (flag) {
this._internals.states.add("--checked");
} else {
this._internals.states.delete("--checked");
}
console.log(this._internals.states.has("--checked"));
}
}
| Specification |
|---|
| HTML> # custom-state-pseudo-class> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
states |
90 | 90 | 126 | 76 | 17.4 | 90 | 126 | 64 | 17.4 | 15.0 | 90 | 17.4 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states