CustomStateSet: add() method

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 add method of the CustomStateSet interface adds value representing a custom state to the CustomStateSet.

Custom elements with a specific state can be selected using the :state() pseudo-class, specifying the desired state as an argument.

Syntax

js
add(value)

Parameters

value

A string that represents the custom state.

Return value

Undefined.

Examples

The following function adds the state checked to a CustomStateSet.

js
class MyCustomElement extends HTMLElement {
  set checked(flag) {
    if (flag) {
      this._internals.states.add("checked");
    }
  }
}

Specifications

Specification
HTML
# custom-state-pseudo-class

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
add

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support