CustomStateSet

An HTML form element, such as a checkbox has different states, "checked" and "unchecked". Likewise, developers creating custom elements need to assign possible states to these elements. The CustomStateList allows these states to be stored, and accessed from the custom element.

An instance of CustomStateList is returned by ElementInternals.states.

A CustomStateList instance is a Set-like object that can hold an ordered set of state values. Each value stored in a CustomStateList is a <dashed-ident>, in the format --mystate.

States are stored as a <dashed-ident> as this format can then be accessed from CSS using the custom state pseudo-class. In the same way that you can use CSS to determine if a checkbox is checked using the :checked pseudo-class, you can use a custom state pseudo-class to select a custom element that is in a certain state.

CustomStateSet.size Experimental

Returns the number of values in the CustomStateSet.

CustomStateSet.add() Experimental

Adds a value to the set, first checking that the value is a <dashed-ident>.

CustomStateSet.clear() Experimental

Removes all elements from the CustomStateSet object.

CustomStateSet.delete() Experimental

Removes one value from the CustomStateSet object.

CustomStateSet.entries() Experimental

Returns a new iterator with the values for each element in the CustomStateSet in insertion order.

CustomStateSet.forEach() Experimental

Executes a provided function for each value in the CustomStateSet object.

CustomStateSet.has() Experimental

Returns a Boolean asserting whether an element is present with the given value.

CustomStateSet.keys() Experimental

An alias for CustomStateSet.values().

CustomStateSet.values() Experimental

Returns a new iterator object that yields the values for each element in the CustomStateSet object in insertion order.

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.

The state of the element can be accessed from CSS using the custom state pseudo-class --checked.

class MyCustomElement 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"));
  }
}

labeled-checkbox {
  border: dashed red;
}
labeled-checkbox:--checked {
  border: solid;
}