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.
add(value)
valueA string that represents the custom state.
Undefined.
The following function adds the state checked to a CustomStateSet.
class MyCustomElement extends HTMLElement {
set checked(flag) {
if (flag) {
this._internals.states.add("checked");
}
}
}
| Specification |
|---|
| HTML> # custom-state-pseudo-class> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
add |
90 | 90 | 126 | 76 | 17.4 | 90 | 126 | 64 | 17.4 | 15.0 | 90 | 17.4 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet/add