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
My component's shadow root hides its markup from the page CSS, so the app can't set its own brand colors on it either.
What you'll have at the end
A component whose brand colors and spacing come from named CSS custom properties, each with a fallback
You need
A shadow-encapsulated custom element already built and registered, whose internal CSS hardcodes its own colors and spacing directly inside the shadow root.
Not covered
Letting the parent page reach in and reshape one specific internal element's border or layout directly; this only covers whole-component values like color and spacing that the shadow CSS already applies everywhere.
Leans on
Package a repeated UI block as a shadow-encapsulated custom element
for readers who don't have a shadow-encapsulated element yet to theme
Expose one internal shadow-DOM element for the parent to restyle with ::part
for reshaping one internal element's border or layout directly, once color and spacing tokens aren't enough
Checked 25 Aug 2026
Part of the Web Components cookbook