ElementInternals: states property

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.

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
Custom State Pseudo Class # dom-elementinternals-states

Browser compatibility

BCD tables only load in the browser