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 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.
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 |
Browser-Kompatibilität
Loading…