HTML reference

part

The part attribute names selected elements inside a Shadow DOM so outside CSS can style them through the ::part() pseudo-element.

Conceptual example

<!-- inside a component's shadow root -->
<button part="action">Save</button>

/* outside the component */
my-card::part(action) {
  border-radius: 0.5rem;
}

Shadow DOM normally keeps internal selectors private. A named part creates an intentional public styling API without exposing every internal element.

Design the API carefully

• Expose stable names that describe the component contract, such as label or action.
• Expose as few parts as possible so internal refactoring remains possible.
• Do not use parts to hide poor semantics; the component still needs accessible names, roles, and keyboard behavior.
• Test the component in the browsers and frameworks your project supports.

Related pages

• custom elements
• is
• id
• English HTML reference