:state()

Die :state()-Pseudoklasse nimmt als Argument einen benutzerdefinierten Bezeichner, der den Status des zugehörigen benutzerdefinierten Elements darstellt.

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

Elemente können aufgrund von Benutzerinteraktionen und anderen Faktoren zwischen Zuständen wechseln. Zum Beispiel kann sich ein Element im „Hover“-Status befinden, wenn ein Benutzer darüber schwebt, oder ein Link kann im „Besucht“-Status sein, nachdem ein Benutzer darauf geklickt hat. Von Browsern bereitgestellte Elemente können basierend auf diesen Zuständen mithilfe von CSS-Pseudoklassen wie :hover und :visited gestylt werden. Ähnlich können autonome benutzerdefinierte Elemente (benutzerdefinierte Elemente, die nicht von eingebauten Elementen abgeleitet sind) ihre Zustände exponieren, wodurch Seiten, die die Elemente verwenden, sie mit der CSS-:state()-Pseudoklasse stylen können.

Die Zustände eines benutzerdefinierten Elements werden durch Zeichenfolgenwerte dargestellt. Diese Werte werden zu einem CustomStateSet-Objekt hinzugefügt oder daraus entfernt, das dem Element zugeordnet ist. Die CSS-:state()-Pseudoklasse passt zu einem Element, wenn der als Argument übergebene Bezeichner im CustomStateSet des Elements vorhanden ist.

Die :state()-Pseudoklasse kann auch verwendet werden, um benutzerdefinierte Zustände innerhalb der Implementierung eines benutzerdefinierten Elements zu erfassen. Dies wird erreicht, indem :state() innerhalb der :host()-Pseudoklassenfunktion verwendet wird, die einen Zustand nur innerhalb des Shadow DOM des aktuellen benutzerdefinierten Elements erfasst.

Darüber hinaus ermöglicht das ::part()-Pseudo-Element, gefolgt von der :state()-Pseudoklasse, das Erfassen der Shadow-Parts eines benutzerdefinierten Elements, die sich in einem bestimmten Zustand befinden. (Shadow-Parts sind Teile des Shadow-Baums eines benutzerdefinierten Elements, die explizit für eine Enthält-Seite zum Styling freigegeben werden.)

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

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

Für ein Live-Beispiel dieses Codes in Aktion siehe das Erfassen des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements-Beispiel auf der CustomStateSet-Seite.

Dieses Beispiel zeigt, wie die :state()-Pseudoklasse innerhalb der :host()-Pseudoklassenfunktion verwendet werden kann, um benutzerdefinierte Zustände innerhalb der Implementierung eines benutzerdefinierten Elements zu erfassen.

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

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

Für ein Live-Beispiel dieses Codes in Aktion siehe das Erfassen des benutzerdefinierten Zustands eines benutzerdefinierten Checkbox-Elements-Beispiel auf der CustomStateSet-Seite.

Dieses Beispiel zeigt, wie die :state()-Pseudoklasse verwendet werden kann, um die Shadow-Parts eines benutzerdefinierten Elements zu erfassen.

Shadow-Parts werden definiert und benannt mithilfe des part-Attributs. Zum Beispiel, überlegen Sie sich ein benutzerdefiniertes Element namens <question-box>, das ein benutzerdefiniertes Element <labeled-checkbox> als Shadow-Part namens checkbox verwendet:

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

Das untenstehende CSS zeigt, wie das ::part()-Pseudo-Element verwendet werden kann, um gegen den checkbox-Shadow-Part zu erfassen. Es zeigt dann, wie das ::part()-Pseudo-Element, gefolgt von der :state()-Pseudoklasse, verwendet werden kann, um gegen denselben Part zu erfassen, wenn er sich im checked-Zustand befindet.

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

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

Für ein Live-Beispiel dieses Codes in Aktion siehe das Erfassen eines benutzerdefinierten Zustands in einem Shadow-Part eines benutzerdefinierten Elements-Beispiel auf der CustomStateSet-Seite.

• CustomStateSet
• Pseudoklassen
• Lernen: Pseudoklassen und Pseudo-Elemente
• Benutzerdefinierte Zustände und benutzerdefinierte Zustandspseudoklassen-CSS-Selektoren in Benutzerdefinierte Elemente verwenden