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