The HTML exportparts attribute
Quick answer
The HTML exportparts attribute forwards the part names of a nested shadow tree up to the next outer tree, so deeply nested component internals can still be styled with ::part(). It is a global attribute for web components.
Overview
The part attribute only exposes an element one shadow boundary outward. When components are nested — a component that itself uses another component — the inner parts are hidden again from the outermost page. exportparts re-exposes them.
Place exportparts on the nested component's host element and list the parts to forward, optionally renaming them with inner: outer mappings so names do not clash.
Values
| Value |
|---|
| A comma-separated list of part names or "inner: exposed" mappings. |
Example
<x-inner exportparts="title, body: card-body"></x-inner>Best practices
- Use slot
="name"on content to project it into a matching named <slot>. - Expose stylable elements inside a shadow tree with part, then target them with
::part(). - Forward nested parts upward with exportparts.
- Keep the styling surface (parts) intentional and documented for consumers.
Frequently asked questions
What does the exportparts attribute do?
Forwards the shadow parts of a nested component up through the shadow boundary.
How do I style inside a web component from outside?
Expose elements with the part attribute, then target them with the
::part() pseudo-element.How do I fill a named slot?
Is exportparts a global attribute?
Yes — it is a global attribute, so it can be set on any HTML element (it is a global attribute), within web components.