:state()

Die Pseudo-Klasse :state() nimmt als Argument einen benutzerdefinierten Bezeichner, der den Zustand des Custom-Elements repräsentiert, das verglichen werden soll.

:state(<custom identifier>) {
  /* ... */
}

Elemente können aufgrund von Benutzerinteraktionen und anderen Faktoren zwischen Zuständen wechseln. Beispielsweise kann sich ein Element im "Hover"-Zustand befinden, wenn ein Benutzer mit der Maus darüberfährt, oder ein Link kann sich im "Visited"-Zustand befinden, nachdem ein Benutzer darauf geklickt hat. Von Browsern bereitgestellte Elemente können mit CSS-Pseudo-Klassen wie :hover und :visited basierend auf diesen Zuständen gestaltet werden. Ähnlich können autonome Custom-Elemente (Custom-Elemente, die nicht von eingebauten Elementen abgeleitet sind) ihre Zustände offenlegen, sodass Seiten, die diese Elemente verwenden, sie mithilfe der CSS-Pseudo-Klasse :state() gestalten können.

Die Zustände eines Custom-Elements werden durch Zeichenketten dargestellt. Diese Werte werden hinzugefügt oder entfernt aus einem CustomStateSet-Objekt, das mit dem Element verknüpft ist. Die CSS-Pseudo-Klasse :state() vergleicht ein Element, wenn der angegebene Bezeichner, der als Argument übergeben wird, im CustomStateSet des Elements vorhanden ist.

Die Pseudo-Klasse :state() kann auch verwendet werden, um benutzerdefinierte Zustände innerhalb der Implementierung eines Custom-Elements zu vergleichen. Dies wird erreicht, indem :state() innerhalb der :host()-Pseudo-Klasse verwendet wird, die einen Zustand nur innerhalb des Shadow-DOM des aktuellen Custom-Elements vergleicht.

Zusätzlich ermöglicht die ::part()-Pseudo-Element in Kombination mit der :state()-Pseudo-Klasse den Vergleich von Shadow-Parts eines Custom-Elements, die sich in einem bestimmten Zustand befinden. (Shadow-Parts sind Teile des Shadow-DOM eines Custom-Elements, die explizit für Styling-Zwecke einer Seite zugänglich gemacht werden.)

Dieses CSS zeigt, wie der Rahmen des autonomen Custom-Elements <labeled-checkbox> auf rot geändert wird, wenn es sich im Zustand "checked" befindet.

labeled-checkbox {
  border: dashed red;
}
labeled-checkbox:state(checked) {
  border: solid;
}

Ein Live-Beispiel für diesen Code finden Sie unter Vergleich des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements auf der CustomStateSet-Seite.

Dieses Beispiel zeigt, wie die :state()-Pseudo-Klasse innerhalb der :host()-Pseudo-Klasse verwendet werden kann, um benutzerdefinierte Zustände innerhalb der Implementierung eines Custom-Elements zu vergleichen.

Das folgende CSS fügt ein graues [x] vor dem Element ein, wenn es sich im Zustand "checked" befindet.

:host(:state(checked))::before {
  content: "[x]";
}

Ein Live-Beispiel für diesen Code finden Sie unter Vergleich des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements auf der CustomStateSet-Seite.

Dieses Beispiel zeigt, wie die :state()-Pseudo-Klasse verwendet werden kann, um die Shadow-Parts eines Custom-Elements anzusprechen.

Shadow-Parts werden durch das part-Attribut definiert und benannt. Beispielsweise verwenden wir ein Custom-Element <question-box>, das ein <labeled-checkbox>-Custom-Element als ein Shadow-Part namens checkbox definiert:

shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>`;

Das folgende CSS zeigt, wie das ::part()-Pseudo-Element verwendet werden kann, um das 'checkbox'-Shadow-Part zu vergleichen. Weiterhin zeigt es, wie mithilfe der ::part()-Pseudo-Element in Kombination mit der :state()-Pseudo-Klasse das gleiche Part angesprochen werden kann, wenn es sich im Zustand checked befindet.

question-box::part(checkbox) {
  color: red;
}

question-box::part(checkbox):state(checked) {
  color: green;
}

Ein Live-Beispiel für diesen Code finden Sie unter Vergleich eines benutzerdefinierten Zustands in einem Shadow-Part eines Custom-Elements auf der CustomStateSet-Seite.

• CustomStateSet
• Pseudo-Klassen
• Leitfaden: Pseudo-Klassen und Pseudo-Elemente
• Benutzerdefinierte Zustände und benutzerdefinierte Pseudo-Klassen-Selektoren in Verwendung von Custom-Elementen