The HTML part attribute
Quick answer
The HTML part attribute exposes an element inside a shadow DOM so the host page can style it with the CSS ::part() pseudo-element. It is a global attribute used when authoring web components, giving consumers controlled styling hooks across the shadow boundary.
Overview
Styles do not normally cross the shadow boundary, which protects a web component's internals but also stops consumers from theming them. The part attribute opens specific, named holes in that wall: mark an internal element with part="label" and the outside page can target it with my-component::part(label) { … }.
You can give an element several space-separated part names, and to forward parts from a nested component you use exportparts.
Values
| Value |
|---|
| One or more space-separated part names. |
Example
<!-- Inside the component's shadow DOM -->
<span part="title">Card title</span>
<!-- In the host page's CSS -->
my-card::part(title) { color: navy; }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 part attribute do?
Exposes an element inside a shadow tree so it can be styled from outside with ::part().
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 part 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.