HTML exportparts Attribute

HTML exportparts Attribute

The HTML exportparts global attribute makes selected parts from a nested shadow tree available for styling outside that shadow tree. It works with the part attribute and the CSS ::part() pseudo-element to provide controlled styling access across nested web components.

Syntax

The exportparts attribute is placed on a shadow host inside another shadow tree. Its value identifies one or more parts from the nested component that should be exposed outside the containing shadow tree.

<user-card exportparts="name, avatar"></user-card>

Multiple part names are separated by commas. Each named part must correspond to a part exposed by the nested component.

Attribute Value

The value of exportparts is a comma-separated list of part names or part-name mappings.

Shadow Parts

The part attribute assigns one or more part names to an element inside a shadow tree. CSS outside that shadow tree can target an exposed part with the ::part() pseudo-element.

<div part="content">Component content</div>

The parent document can style this part when it is directly exposed by the component.

my-component::part(content) {
  font-weight: bold;
}

When components are nested inside additional shadow trees, their parts are not automatically exposed through each outer component. The exportparts attribute provides that additional connection.

Exporting Parts

Suppose an inner component contains an element with part="label". An outer component can export that part by placing exportparts="label" on the inner component's shadow host.

<inner-component exportparts="label"></inner-component>

The exported part can then be targeted through the outer component from outside its shadow tree.

outer-component::part(label) {
  font-weight: bold;
}

Only the parts listed by exportparts are forwarded through that shadow boundary.

Renaming Exported Parts

An exported part can be given a different external name by separating the internal and external names with a colon.

<inner-component exportparts="label:profile-label"></inner-component>

The first name identifies the part inside the nested component, while the second name is the name exposed outside the containing shadow tree.

outer-component::part(profile-label) {
  font-weight: bold;
}

Renaming parts can help prevent naming conflicts and provide a clearer styling interface for a component.

part and exportparts

The part and exportparts attributes work together but serve different purposes.

The part attribute defines the styling hook, while exportparts allows that hook to remain accessible through nested components.

Common Mistakes

Do not assume that parts from a nested shadow tree are automatically available outside every surrounding shadow tree. Each shadow boundary that needs to expose a nested part must forward it appropriately.

Do not confuse exportparts with the part attribute. The part attribute names an element as a CSS shadow part, while exportparts forwards parts from a nested component.

Do not separate multiple exported parts with spaces alone. The exportparts value uses a comma-separated list of part mappings.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The exportparts global attribute is widely supported in current core browsers and is used with shadow DOM parts.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the exportparts Attribute

The example creates two nested web components. The inner component exposes a part named message, and the outer component uses exportparts so the page can style that part through the outer shadow boundary.

Summary

The HTML exportparts global attribute forwards selected CSS shadow parts from a nested shadow tree through another shadow boundary. Its value is a comma-separated list of part names or mappings, and exported parts can retain their original names or be exposed under different names. Together, part, exportparts, and ::part() provide a controlled way to style selected portions of nested web components.