HTML exportparts Global Attribute

The exportparts attribute is a global HTML attribute used in conjunction with Web Components and the Shadow DOM. It allows a custom element to expose selected internal shadow parts so they can be styled from outside the component using the ::part() pseudo-element.

By default, styles inside a Shadow DOM are encapsulated, meaning external stylesheets cannot target internal elements. The exportparts attribute provides a controlled way to expose specific parts of a component’s internal structure without breaking encapsulation entirely.

This makes it especially useful when building reusable, themeable components that still maintain a clean separation between internal implementation and external styling.

How exportparts Works

The exportparts attribute is placed on a custom element that uses a Shadow DOM. Inside that component, internal elements must define a part attribute. The exportparts attribute then maps those internal part names to names that can be accessed from outside the component.

Example: Simple Exported Part

Custom element structure (inside Shadow DOM)

<button part="button">Click me</button>

Host element

<my-button exportparts="button"></my-button>

External CSS

my-button::part(button) {
  background-color: #4caf50;
  color: white;
  border-radius: 6px;
}

In this case, the internal button part becomes available for styling from outside the component.

Renaming Exported Parts

You can rename parts when exporting them. This is useful for maintaining consistent naming conventions or avoiding conflicts.

<my-button exportparts="button: primary-button"></my-button>

Now it can be styled like this:

my-button::part(primary-button) {
  padding: 10px 16px;
}

Exporting Multiple Parts

Multiple parts can be exported by separating them with commas:

<custom-card exportparts="header, body, footer"></custom-card>

Or with renaming:

<custom-card exportparts="header: card-header, footer: card-footer"></custom-card>

Why Use exportparts?

The exportparts attribute helps solve common styling challenges when working with Shadow DOM components:

• Allows safe and intentional styling from outside a component
• Preserves encapsulation while enabling customization
• Prevents direct DOM access or reliance on internal structure
• Encourages reusable and themeable UI components

This is particularly useful for design systems, UI libraries, and reusable widgets.

Relationship to part and ::part()

Together, these features create a controlled styling API for web components.

Notes and Best Practices

• Only elements with a part attribute can be exported.
• Exported parts do not expose the full DOM - only styling access.
• Avoid over-exporting parts to keep components maintainable.
• Use consistent naming to make styling intuitive for consumers.