0Pricing
HTML Academy · Lesson

Part and Exportparts for External Styling

Expose shadow DOM parts to external CSS with part and exportparts.

The Encapsulation Trade-off

Shadow DOM's strict style encapsulation prevents consumers from restyling individual elements inside a component. CSS variables work for global properties, but you cannot, for example, give the internal "close" button a custom border-radius. Parts solve this.

The part Attribute

Mark a shadow-internal element with part="name". Consumers can then target it with the ::part(name) pseudo-element: my-dialog::part(close-button) { color: red; }. The named element becomes a styling hook while the rest of the shadow stays encapsulated.

// Shadow tree:
<button part="close-button">×</button>
// Page CSS:
my-dialog::part(close-button) {
  color: red;
  border-radius: 50%;
}

All lessons in this course

  1. attachShadow and Shadow Root
  2. Slot Elements for Content Distribution
  3. Scoped Styles Inside Shadow DOM
  4. Part and Exportparts for External Styling
← Back to HTML Academy