Web Components & Shadow DOM

What is the purpose of the part attribute in Web Components?

<!-- Inside Shadow DOM -->
<div part="header">Header</div>
<div part="content">Content</div>

/* Outside styling */
::part(header) {
  color: blue;
}
::part(content) {
  padding: 20px;
}

To create component partials
To expose internal elements for external styling
The part attribute and ::part() pseudo-element: 1) Allow selective styling of internal elements from outside the Shadow DOM, 2) Maintain encapsulation while providing styling hooks, 3) Create a clear API for styleable elements within components, 4) Provide more granular control than CSS custom properties. This is useful for creating themeable components while maintaining encapsulation.
To define component properties
To split components into chunks

Next Question (20/20)