Shadow parts
The ::part CSS pseudo-element represents any element within a shadow tree that has a matching part attribute.
css
custom-element::part(foo) { /* Styles to apply to the `foo` part */ }
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 CSS pseudo-element represents any element within a shadow tree that has a matching part attribute.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.