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 July 2020.
Die part-Eigenschaft der Element-Schnittstelle
repräsentiert die Teil-Identifier des Elements (d.h. über das part-Attribut gesetzt), zurückgegeben als eine DOMTokenList. Diese können verwendet werden, um Teile eines Shadow-DOMs über das ::part-Pseudoelement zu stylen.
Wert
Ein DOMTokenList-Objekt.
Beispiele
Der folgende Auszug stammt aus unserem shadow-part
Beispiel. Hier wird das part-Attribut verwendet, um die Shadow-Parts zu finden, und die
part-Eigenschaft wird dann verwendet, um die Teil-Identifier jedes Tabs zu ändern, sodass das korrekte Styling auf das aktive Tab angewendet wird, wenn die Tabs angeklickt werden.
js
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 |