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
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 Standard # custom-state-pseudo-class |
Browser compatibility
BCD tables only load in the browser