Element.part

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.

Syntax

let elementPartList = element.part

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.

let tabs = [];
let children = this.shadowRoot.children;

for(let 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 Status Comment
Shadow Parts
The definition of 'Element.part' in that specification.
Working Draft

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
partChrome Full support YesEdge Full support 79Firefox Full support 71
Disabled
Full support 71
Disabled
Disabled From version 71: this feature is behind the layout.css.shadow-parts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari Full support 13.1WebView Android Full support YesChrome Android Full support YesFirefox Android No support NoOpera Android ? Safari iOS Full support 13.4Samsung Internet Android Full support Yes

Legend

Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.

See also