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 read-onlypart property of theElement interface contains aDOMTokenList object representing the part identifier(s) of the element. It reflects the element'spart content attribute. These can be used to style parts of a shadow DOM, via the::part pseudo-element.

Value

ADOMTokenList object. If thepart attribute is not set or empty, it returns an emptyDOMTokenList, i.e., aDOMTokenList with thelength property equal to0.

Although thepart property itself is read-only in the sense that you can't replace theDOMTokenList object, you can still assign to thepart property directly, which is equivalent to assigning to itsvalue property. You can also modify theDOMTokenList object using theadd(),remove(),replace(), andtoggle() methods.

Examples

The following excerpt is from ourshadow-partexample. Here thepart attribute is used to find the shadow parts, and thepart property is then used to change the part identifiers of each tab sothe correct styling is applied to the active tab when tabs are clicked.

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);});