Element: part-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2020.
Die schreibgeschützte part-Eigenschaft der Element-Schnittstelle enthält ein DOMTokenList-Objekt, das die Teil-Identifikatoren des Elements repräsentiert. Sie spiegelt das part-Inhaltsattribut des Elements wider. Diese können verwendet werden, um Teile eines Shadow-DOMs über das ::part-Pseudoelement zu stylen.
Wert
Ein DOMTokenList-Objekt. Wenn das part-Attribut nicht gesetzt oder leer ist, wird eine leere DOMTokenList zurückgegeben, d.h. eine DOMTokenList mit der length-Eigenschaft gleich 0.
Obwohl die part-Eigenschaft selbst insofern schreibgeschützt ist, als Sie das DOMTokenList-Objekt nicht ersetzen können, können Sie trotzdem direkt der part-Eigenschaft einen Wert zuweisen, was gleichbedeutend ist mit der Zuweisung zu ihrer value-Eigenschaft. Sie können das DOMTokenList-Objekt auch mit den Methoden add(), remove(), replace() und toggle() modifizieren.
Beispiele
Der folgende Ausschnitt stammt aus unserem shadow-part
Beispiel. Hier wird das part-Attribut verwendet, um die Shadow-Teile zu finden, und die
part-Eigenschaft wird dann verwendet, um die Teil-Identifikatoren jedes Tabs zu ändern, sodass das korrekte Styling auf den aktiven Tab angewendet wird, wenn auf die Tabs geklickt wird.
const tabs = [];
const children = this.shadowRoot.children;
for (const elem of children) {
if (elem.getAttribute("part")) {
tabs.push(elem);
}
}
tabs.forEach((tab) => {
tab.addEventListener("click", (e) => {
tabs.forEach((tab) => {
tab.part = "tab";
});
e.target.part = "tab active";
});
console.log(tab.part);
});
Spezifikationen
| Specification |
|---|
| CSS Shadow Parts # idl |