Senior LevelCSS & Modern Layouts
How do you style Shadow DOM internals using ::part() and exportparts?
❓ Interview Prompt: Explain CSS ::part() pseudo-element for styling Web Component internals from outside the shadow boundary.
Shadow DOM encapsulation prevents external CSS from styling internal elements. The ::part() pseudo-element creates controlled styling hooks:
How It Works:
1
Web Component author marks internal elements with
part="name" attribute.2
External CSS targets them with
custom-element::part(name) { }.3
Only explicitly exported parts are styleable — encapsulation is preserved for everything else.
exportparts Attribute:
For nested Shadow DOMs, exportparts="inner-part: outer-name" re-exports a child component's part to the outer host.
Code Implementation Example
css
/* Inside Web Component template */
/* <button part="btn">Click Me</button> */
/* <span part="label">Label</span> */
/* External CSS styling exported parts */
my-button::part(btn) {
background: #3d2c2e;
color: #f5edf0;
border-radius: 8px;
}
my-button::part(label) {
font-weight: 600;
}💡Styling Shadow DOM internals through ::part() pseudo-element.
🎯 Interview Key Takeaway
::part() enables controlled external styling of Shadow DOM internals without breaking encapsulation.
#Shadow DOM#::part()#Web Components#Senior
Back to all CSS & Modern Layouts Questions→