Shadow parts
The part and exportparts HTML attributes expose elements of a shadow DOM as named parts, which can be selected by the ::part() CSS pseudo-element for styling.
Overview
The part and exportparts HTML attributes expose elements of a shadow DOM as named parts, which can be selected by the ::part() CSS pseudo-element for styling.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 73 | 79 | 72 | 13.1 | 73 | 13.4 | |
| DOM API | ||||||
| The read-only part property of the Element interface contains a DOMTokenList object representing the part identifier(s) of the element. It reflects the element's part content attribute. These can be used to style parts of a shadow DOM, via the ::part pseudo-element. | 73 | 79 | 72 | 13.1 | 73 | 13.4 |
| Other | ||||||
| `::part` | 73 | 79 | 72 | 13.1 | 73 | 13.4 |
| The part global attribute contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. | 73 | 79 | 72 | 13.1 | 73 | 13.4 |
Syntax
/* Inside the Web Component */
/* <span part="label">Label</span> */
/* External CSS */
my-component::part(label) {
color: #1e40af;
font-weight: bold;
}
my-component::part(icon) {
fill: currentColor;
width: 20px;
}Live demo
Use cases
Using Shadow parts
The part and exportparts HTML attributes expose elements of a shadow DOM as named parts, which can be selected by the ::part() CSS pseudo-element for styling.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features