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