HTML part Attribute

HTML part Attribute

The HTML part attribute assigns one or more part names to an element inside a shadow tree. These names allow selected parts of a web component to be styled from outside the shadow DOM using the CSS ::part() pseudo-element.

Elements That Use the part Attribute

The part attribute is a global attribute and can be specified on HTML elements. It is useful on elements inside a shadow tree that need to be exposed for styling from outside the shadow DOM.

part Value

The value of the part attribute is a space-separated list of part names. Each name identifies the element as a part that can be targeted through the shadow host.

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

An element can have more than one part name.

<button part="button primary">Continue</button>

part and Shadow DOM

Shadow DOM normally keeps a component's internal elements isolated from CSS selectors outside its shadow tree. The part attribute provides a controlled way for a component author to expose selected internal elements for styling.

<template id="card-template">
  <div class="card">
    <h2 part="title">Card Title</h2>
    <p part="content">Card content goes here.</p>
  </div>
</template>

In this example, the title and content are exposed as named parts. Other internal elements remain unavailable to outside CSS through ::part() unless they are also assigned part names.

Using ::part()

The CSS ::part() pseudo-element selects an exposed part through the shadow host. The name inside ::part() must match a name assigned with the part attribute.

custom-card::part(title) {
  color: #0088cc;
}

custom-card::part(content) {
  font-size: 18px;
}

These selectors style the elements exposed as title and content without exposing the rest of the component's shadow tree to ordinary CSS selectors.

Multiple Part Names

An element can expose several part names by separating them with spaces. This allows the same element to be targeted through different part names.

<button part="control primary">Save</button>

custom-button::part(control) {
  padding: 10px;
}

custom-button::part(primary) {
  font-weight: bold;
}

Both selectors can target the same internal button because both names are included in its part attribute.

part and exportparts

The part attribute exposes a named part through its immediate shadow host. When web components are nested inside other shadow trees, the exportparts attribute can make selected parts from an inner component available outside the containing shadow tree.

<custom-card exportparts="title, content"></custom-card>

The exportparts attribute can also expose a part under a different name by mapping the internal part name to an external name.

<custom-card exportparts="title:card-title"></custom-card>

Outside CSS can then target the exported name with ::part(card-title).

Common Mistakes

Do not confuse part with class. A class can be used by normal CSS selectors within the appropriate styling scope, while a part name provides a controlled styling hook for an element inside a shadow tree.

Do not separate multiple part names with commas. The part attribute uses a space-separated list of names.

Do not write ::part(.title) or ::part(#title). The value passed to ::part() is the part name itself, without a class or ID selector prefix.

Do not assume that a part inside a nested shadow tree is automatically exposed through every outer component. Use exportparts when a part needs to be forwarded through another shadow boundary.

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 part global attribute and CSS shadow parts are widely supported in current core browsers.

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 part Attribute

The example creates a simple custom element with a shadow tree. The heading and paragraph inside the shadow tree have part attributes, allowing the page's CSS to style them with ::part().

Summary

The HTML part attribute assigns one or more part names to elements inside a shadow tree. Component authors can expose selected internal elements through these names, allowing outside CSS to style them with the ::part() pseudo-element while preserving the Shadow DOM boundary.