CustomStateSet.delete() — Methode · JavaScript-Referenz

Signatur

CustomStateSet.prototype.delete(value)

Beschreibung

Mit delete() entfernt man einen einzelnen Zustand aus dem CustomStateSet eines autonomen Custom Elements. Das Set erreicht man über ElementInternals.states. Die ElementInternals bekommt man im Konstruktor der Komponente über this.attachInternals().

Benutzerdefinierte Zustände funktionieren wie eigene Pseudoklassen. Solange ein Wert wie "checked" im Set steht, passt der CSS-Selektor :state(checked) auf das Element. Nach delete("checked") passt er sofort nicht mehr. Deshalb eignet sich delete() für alle Zustandswechsel, die man sonst mit Klassen oder Attributen lösen würde: ausgeklappt/eingeklappt, lädt/fertig, gültig/ungültig. Der Vorteil: Die Zustände liegen intern in der Komponente und können von außen nicht versehentlich überschrieben werden, wie es bei einem class-Attribut passieren kann.

Die Methode verhält sich wie Set.prototype.delete(). Sie gibt true zurück, wenn der Wert im Set stand und entfernt wurde, sonst false. Einen Wert zu entfernen, der gar nicht gesetzt ist, ist also unschädlich und wirft keinen Fehler.

Parameter

Name	Typ	Default	Beschreibung
$value Pflicht	string		Name des Zustands, der entfernt werden soll, z. B. `"checked"`. Groß- und Kleinschreibung zählt. Andere Typen werden in einen String umgewandelt.

Beispiele

Eigene Checkbox mit :state(checked)

class MyCheckbox extends HTMLElement {
  #internals;

  constructor() {
    super();
    this.#internals = this.attachInternals();
    this.addEventListener('click', () => {
      this.checked = !this.checked;
    });
  }

  get checked() {
    return this.#internals.states.has('checked');
  }

  set checked(flag) {
    if (flag) {
      this.#internals.states.add('checked');
    } else {
      // Zustand entfernen: :state(checked) passt nicht mehr
      this.#internals.states.delete('checked');
    }
  }
}

customElements.define('my-checkbox', MyCheckbox);

// CSS dazu:
// my-checkbox:state(checked)::before { content: '✔'; }

Rückgabewert auswerten

class StatusBadge extends HTMLElement {
  constructor() {
    super();
    this.internals = this.attachInternals();
  }
}
customElements.define('status-badge', StatusBadge);

const badge = document.createElement('status-badge');
badge.internals.states.add('loading');

console.log(badge.internals.states.delete('loading')); // war vorhanden
console.log(badge.internals.states.delete('loading')); // schon entfernt
console.log(badge.internals.states.size);

true false 0

Ladezustand bei einem asynchronen Abruf wechseln

class DataList extends HTMLElement {
  #internals = this.attachInternals();

  async load(url) {
    const { states } = this.#internals;
    states.delete('error');
    states.add('loading');
    try {
      const res = await fetch(url);
      const items = await res.json();
      this.textContent = items.map((i) => i.name).join(', ');
    } catch {
      states.add('error');
    } finally {
      states.delete('loading');
    }
  }
}
customElements.define('data-list', DataList);

// CSS: data-list:state(loading) { opacity: .5; }
//      data-list:state(error)   { color: crimson; }

// Wichtig · Fallstricke

Nur für autonome Custom Elements: attachInternals() funktioniert nicht bei eingebauten Elementen wie <div> und auch nicht bei angepassten eingebauten Elementen (is="…"). Dort wird ein NotSupportedError geworfen.
Veraltete Syntax: Ältere Chromium-Versionen (bis Chrome 124) verlangten Zustandsnamen mit zwei Bindestrichen (states.add('--checked')) und den Selektor :--checked. Diese Form ist veraltet. Verwende einfache Namen und :state(name). Wenn du alte Browser unterstützen musst, frage die Unterstützung per CSS.supports('selector(:state(x))') ab.
Der Name muss genau so geschrieben sein wie beim Hinzufügen: delete('Checked') entfernt 'checked' nicht.
Zustände sind nicht als Attribut im DOM sichtbar. Für Barrierefreiheit setzt du passende ARIA-Werte zusätzlich, z. B. internals.ariaChecked.
Soll das ganze Set geleert werden, ist clear() kürzer als mehrere delete()-Aufrufe.

Siehe auch

Set.prototype.delete() CustomStateSet.clear() CustomStateSet.keys() CustomStateSet.values() CustomStateSet.add()