ElementInternals: states property
Baseline
2024
Newly available
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.
Value
A CustomStateSet which is a Set of strings.
Examples
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.
js
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"));
}
}
Specifications
| Specification |
|---|
| HTML # custom-state-pseudo-class |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
states
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support