The HTML exportparts attribute
In short
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, within web components.
