CodePen Embed - CustomStateSet

<my-element>MyElement</my-element>

my-element:state(clicked) {
  color: red;
}

class MyElement extends HTMLElement {
  #internals;
  
  constructor() {
    super();
    this.#internals = this.attachInternals();
    this.addEventListener("click", this.#onClick.bind(this));
  }
  
  #onClick() {
    this.#internals.states.add("clicked");
  }
}

customElements.define("my-element", MyElement);

This Pen is owned by mugi-uno on CodePen.

See more by @mugi-uno on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.