Element: part property

Value

A DOMTokenList object. If the part attribute is not set or empty, it returns an empty DOMTokenList, i.e., a DOMTokenList with the length property equal to 0.

Although the part property itself is read-only in the sense that you can't replace the DOMTokenList object, you can still assign to the part property directly, which is equivalent to assigning to its value property. You can also modify the DOMTokenList object using the add(), remove(), replace(), and toggle() methods.

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.

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

Browser compatibility

See also

• ::part
• part