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 |