ElementInternals: states property
Baseline 2024Newly 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 # custom-state-pseudo-class |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
states |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.