CSS ::part()

The ::part() pseudo-element styles elements inside a shadow tree only when the component author exposes those elements with a part attribute.

Syntax

custom-element::part(name) {
  /* styles */
}

Example

user-card::part(name) {
  color: #2563eb;
  font-weight: 700;
}

/* Inside the component shadow DOM:
<span part="name">Ada Lovelace</span>
*/
Result:

The external page cannot style arbitrary shadow DOM. It can style only exposed parts.

Important note

Adding part to normal light DOM is not what makes ::part() useful. The value is exposed from inside a Web Component shadow tree.