Newly available Newly available. Verify your target environments before adopting.

:state()

The CustomStateSet interface of the Document Object Model stores a list of states for an autonomous custom element, and allows states to be added and removed from the set.

The interface can be used to expose the internal states of a custom element, allowing them to be used in CSS selectors by code that uses the element.

Web Components

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:state
125
125
126
17.4
125
17.4
DOM API
CustomStateSet

The CustomStateSet interface of the Document Object Model stores a list of states for an autonomous custom element, and allows states to be added and removed from the set.
90
90
126
17.4
90
17.4
@@iterator

[Symbol.iterator]
90
90
126
17.4
90
17.4
add

The add method of the CustomStateSet interface adds value representing a custom state to the CustomStateSet.
90
90
126
17.4
90
17.4
clear

The clear() method of the CustomStateSet interface removes all elements from the CustomStateSet object.
90
90
126
17.4
90
17.4
delete

The delete() method of the CustomStateSet interface deletes a single value from the CustomStateSet.
90
90
126
17.4
90
17.4
entries

The entries method of the CustomStateSet interface returns a new iterator object, containing an array of [value,value] for each element in the CustomStateSet.
90
90
126
17.4
90
17.4
forEach

The forEach() method of the CustomStateSet interface executes a provided function for each value in the CustomStateSet object.
90
90
126
17.4
90
17.4
has

The has() method of the CustomStateSet interface returns a Boolean asserting whether an element is present with the given value.
90
90
126
17.4
90
17.4
keys

The keys() method of the CustomStateSet interface is an alias for CustomStateSet.values.
90
90
126
17.4
90
17.4
size

The size property of the CustomStateSet interface returns the number of values in the CustomStateSet.
90
90
126
17.4
90
17.4
values

The values() method of the CustomStateSet interface returns a new iterator object that yields the values for each element in the CustomStateSet object in insertion order.
90
90
126
17.4
90
17.4
states

The states read-only property of the ElementInternals interface returns a CustomStateSet representing the possible states of the custom element.
90
90
126
17.4
90
17.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (125)
Implementation note
  • Uses a dashed-ident (such as `:--foo`) instead of `:state()`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (125)
Implementation note
  • Uses a dashed-ident (such as `:--foo`) instead of `:state()`.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (125)
Implementation note
  • Uses a dashed-ident (such as `:--foo`) instead of `:state()`.

Use cases

  • Using :state()

    The CustomStateSet interface of the Document Object Model stores a list of states for an autonomous custom element, and allows states to be added and removed from the set.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links