CustomStateSet.size — Eigenschaft · JavaScript-Referenz

Signatur

get CustomStateSet.prototype.size

Beschreibung

Die schreibgeschützte Eigenschaft size liefert die Anzahl der Einträge in einem CustomStateSet. Ein solches Set bekommt man über ElementInternals.states, also über die ElementInternals-Instanz, die ein autonomes Custom Element mit this.attachInternals() erzeugt. Die Einträge sind Zeichenketten, die sich in CSS mit der Pseudoklasse :state(name) abfragen lassen.

CustomStateSet verhält sich wie ein Set. Deshalb funktioniert size genauso wie Set.prototype.size: Doppelte Werte zählen nur einmal, und der Wert ändert sich sofort nach add(), delete() oder clear().

In der Praxis braucht man size vor allem zum Debuggen, für Logging oder für eigene Logik wie „Hat das Element überhaupt irgendeinen Zustand?“. Man kann damit auch prüfen, ob ein Zurücksetzen mit clear() geklappt hat.

Beispiele

Zustände zählen in einem Custom Element

class ToggleButton extends HTMLElement {
  #internals;
  constructor() {
    super();
    this.#internals = this.attachInternals();
  }
  get stateCount() {
    return this.#internals.states.size;
  }
  setOn(on) {
    if (on) this.#internals.states.add('on');
    else this.#internals.states.delete('on');
  }
}
customElements.define('toggle-button', ToggleButton);

const btn = document.createElement('toggle-button');
console.log(btn.stateCount);
btn.setOn(true);
console.log(btn.stateCount);
btn.setOn(false);
console.log(btn.stateCount);

0 1 0

Doppelte Werte zählen nur einmal

class StatusBadge extends HTMLElement {
  constructor() {
    super();
    const internals = this.attachInternals();
    internals.states.add('loading');
    internals.states.add('loading');
    internals.states.add('error');
    console.log(internals.states.size);
  }
}
customElements.define('status-badge', StatusBadge);
document.createElement('status-badge');

2

Zurücksetzen prüfen und Zustände ausgeben

class FormStep extends HTMLElement {
  #internals = this.attachInternals();
  update(states) {
    this.#internals.states.clear();
    states.forEach((s) => this.#internals.states.add(s));
    console.log(`${this.#internals.states.size} Zustände:`, [...this.#internals.states]);
  }
  reset() {
    this.#internals.states.clear();
    console.log('Leer?', this.#internals.states.size === 0);
  }
}
customElements.define('form-step', FormStep);

const step = document.createElement('form-step');
step.update(['active', 'valid']);
step.reset();

2 Zustände: ['active', 'valid'] Leer? true

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie states.size = 0 wird im nicht-strikten Modus einfach ignoriert und löst im strikten Modus einen TypeError aus. Leeren Sie das Set mit clear().
Nur für autonome Custom Elements: attachInternals() gibt es nur bei eigenen Elementen, die direkt von HTMLElement erben. Bei eingebauten Elementen wie <div> oder bei erweiterten eingebauten Elementen wirft der Aufruf eine NotSupportedError-DOMException.
Veraltete Syntax: Ältere Chromium-Versionen erlaubten nur Namen mit ---Präfix, z. B. --checked, und die CSS-Syntax :--checked. Diese Namen zählen dort ganz normal zu size. Neuer Code sollte :state() und Namen ohne Präfix verwenden.
Browser-Unterstützung: In allen aktuellen Browsern verfügbar (Baseline 2024). Für ältere Browser prüfen Sie vorher mit 'CustomStateSet' in window.

Siehe auch

FontFaceSet.size CSSRotate.z CustomEvent.detail RTCStatsReport.size CSSRotate.angle