Element: part property
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.
The part
property of the Element
interface
represents the part identifier(s) of the element (i.e. set using the part
attribute), returned as a DOMTokenList
. These can be used to style parts
of a shadow DOM, via the ::part
pseudo-element.
Value
A DOMTokenList
object.
Examples
The following excerpt is from our shadow-part
example. Here the part
attribute is used to find the shadow parts, and the
part
property is then used to change the part identifiers of each tab so
the correct styling is applied to the active tab when tabs are clicked.
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);
});
Specifications
Specification |
---|
CSS Shadow Parts # idl |
Browser compatibility
BCD tables only load in the browser