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 [[../../../../../../../mdn.github.io/web-components-examples/shadow-part/index|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 PartsThe definition of 'Element.part' in that specification. | Working Draft |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
part
|
Chrome
Full support Yes |
Edge
Full support 79 |
Firefox Full support 71 Full support 71 Disabled' From version 71: this feature is behind the |
IE
No support No |
Opera
Full support Yes |
Safari
Full support 13.1 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
Full support 13.4 |
Samsung 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
::part
part
Element.part by Mozilla Contributors is licensed under CC-BY-SA 2.5.