New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
The custom properties I exposed cover color and spacing. Now the design team wants to reshape one internal element's border and layout too, and no selector reaches that deep.
What you'll have at the end
One internal element marked with a part attribute that the parent page can restyle with ::part(), the rest still sealed
You need
A shadow-DOM custom element with an open shadow root, already rendering on a real page, and one internal element inside it whose border or internal layout the design team wants reshaped, with no CSS custom property already covering that ask.
Not covered
Reaching that same part from a page two shadow trees up through a nested component, or opening more than this one element: exportparts and a second part attribute are separate jobs from wiring up the first.
Package a repeated UI block as a shadow-encapsulated custom element
for building the sealed shadow-DOM component itself before opening any single element inside it for outside styling
Let outside CSS theme a shadow-DOM component through custom properties
for handing the parent page control over color and spacing across the whole component, instead of one element's border and layout
Checked 25 Aug 2026
Part of the Web Components cookbook