Shadow Parts
CSS Shadow Parts bieten Entwicklern eine Möglichkeit, Elemente innerhalb des Shadow DOM eines Komponents von außen zu stylen, während die Kapselung erhalten bleibt.
Einführung
Die webforJ-Komponenten sind mit Web Components aufgebaut, die auf dem Shadow DOM basieren, um die interne Struktur und die Stile eines Komponents zu kapseln.
Web Components sind eine Suite von Technologien, mit denen Sie wiederverwendbare, kapselbare benutzerdefinierte Elemente für die Verwendung in Webanwendungen erstellen können.
Der Shadow DOM verhindert, dass interne Stile und Markup aus dem Komponent entwichen oder von externen Stilen beeinflusst werden. Diese Kapselung stellt sicher, dass Komponenten eigenständig bleiben und das Risiko von Stilkonflikten verringert wird.
Kapselung ist ein wesentlicher Vorteil von Web Components. Indem Sie die Struktur, Stile und das Verhalten eines Komponents vom Rest Ihrer App getrennt halten, vermeiden Sie Konflikte und erhalten sauberen, wartbaren Code.
Da diese Kapselung jedoch besteht, können Sie Elemente innerhalb eines Shadow DOM nicht direkt mit Standard-CSS-Selektoren stylen.
Zum Beispiel rendert die dwc-button-Komponente die folgende Struktur:
<dwc-button>
#shadow-root (open)
<span class="control__prefix">...</span>
<span class="control__label">Button</span>
<span class="control__suffix">...</span>
...
</dwc-button>
Wenn Sie versuchen, das label so zu stylen:
/* Funktioniert NICHT */
dwc-button .control__label {
color: pink;
}
hat es keine Auswirkungen, da das .control__label-Element im Shadow Root lebt.
Hier kommen die CSS Shadow Parts ins Spiel.
Stylisieren mit Shadow Parts
Shadow Parts ermöglichen es externen Stylesheets, spezifische Elemente innerhalb eines Shadow Trees anzusprechen, aber nur wenn diese Elemente explizit vom Komponent als „exponiert“ markiert sind.
Wie Parts exponiert werden
Um ein Element für das externe Styling zu exponieren, muss der Autor des Komponents dem Element im Shadow DOM ein part-Attribut zuweisen.
Alle webforJ-Komponenten exponieren automatisch relevante Teile zum Stylen. Sie finden die Liste der unterstützten Teile im Abschnitt Styling > Shadow Parts der Dokumentation jedes Komponents.
Zum Beispiel exponiert die dwc-button-Komponente Teile wie prefix, label und suffix:
<dwc-button>
#shadow-root (open)
<span part="prefix" class="control__prefix">...</span>
<span part="label" class="control__label">Button</span>
<span part="suffix" class="control__suffix">...</span>
</dwc-button>
Sobald sie exponiert sind, können diese Teile von außerhalb des Komponents mit dem ::part() Pseudoelement gestylt werden.
Das ::part() Pseudoelement
Der ::part()-Selektor ermöglicht es Ihnen, Stile auf Elemente im Shadow DOM anzuwenden, die mit einem part-Attribut markiert wurden.
Zum Beispiel, um die Farbe des label-Teils in einem dwc-button zu ändern:
dwc-button::part(label) {
color: red;
}
Sie können ::part() mit anderen Selektoren kombinieren, wie :hover:
dwc-button::part(label):hover {
color: pink;
}
Sie können innerhalb eines Shadow Parts nicht auswählen. Folgendes wird nicht funktionieren:
/* Funktioniert NICHT */
dwc-button::part(label) span {
/* CSS hier */
}