---
+ ++Build-in elements provided by user agents have certain “states” that can change over time depending on user interaction and other factors, and are exposed to web authors through pseudo classes. For example, some form controls have the “invalid” state, which is exposed through the :invalid pseudo-class.
+ +Like built-in elements, custom elements can have various states to be in too, and custom element authors want to expose these states in a similar fashion as the built-in elements.
+
Summary or proposal based on current status; paragraph(s) and code.
+The CustomStateSet API allows component authors to expose internal component state for use in styling or other element-matching operations (such as querySelector
This is different from a custom element sprouting a class (via this.classList.add in any state added to the custom element can be seen as internal (similar to the :checked pseud-selector for input elements).
To allow for this operation, a set-like API is exposed at ElementInternals.prototype.states, meaning that only custom elements can apply custom states. An example might look like the following:
+
+class FancyElement extends HTMLElement {
+ #internals = this.attachInternals();
+
+ constructor() {
+ super();
+
+ const root = this.attachShadow({ mode: 'open' });
+ const button = document.createElement('button');
+ button.innerText = 'Add clicked state';
+ button.setAttribute('part', 'btn');
+ root.append(button);
+
+ this.addEventListener('click', function wasClicked() {
+ this.#internals.states.add('--clicked');
+ this.removeEventListener('click', wasClicked);
+ });
+ }
+}
+customElements.define('fancy-element', FancyElement);
+
+
+
+ Consumers of the fancy-element code can now take advantage of the :--clicked state in CSS or in any DOM querying API to modify or select the relevant element once clicked.
For example, to change the background of the element's btn part, a consuming developer could apply the following CSS:
+
+:--clicked::part(btn) {
+ background: rebeccapurple;
+}
+
+
+
+ Alternatively, a consuming developer could call document.querySelectorAll(':--clicked') to target all elements with the custom state.
---
-:state(--state); however, it appears as if the current status is fairly accepted right now.