SVG Styling Across Shadow DOM
Shadow DOM encapsulates most styling, but CSS custom properties, ::part, and ::slotted provide controlled ways to theme SVG inside it.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
What Crosses the Shadow Boundary and What Doesn't
Most CSS selectors written outside a shadow root cannot reach inside to style an SVG icon rendered within it, but CSS custom properties are a notable exception — they inherit through the shadow boundary normally, making them the standard mechanism for letting external code theme an encapsulated component's internal SVG colors or sizing.
- Most external CSS selectors cannot reach SVG content inside a shadow root
- CSS custom properties are a key exception, inheriting through the boundary
- This makes custom properties the standard external theming mechanism
Using ::part and ::slotted for More Direct Styling Access
For cases needing more direct external styling control, the component author can expose specific internal SVG elements via the part attribute, letting external CSS target them with the ::part() pseudo-element, while ::slotted() lets external CSS style SVG content that was passed into the component through a <slot> from outside.
- part attribute exposes specific internal elements for external ::part() styling
- ::slotted() styles SVG content passed into the component via a <slot>
- Both give the component author deliberate, controlled external styling hooks
Frequently Asked Questions
Why can't I just style an SVG inside someone else's shadow DOM component directly?
Shadow DOM's style encapsulation is intentional, preventing external styles from unpredictably breaking a component's internal appearance — you need one of the deliberate escape hatches (custom properties, ::part, or ::slotted) that the component exposes.
Does currentColor work for SVG icons styled via CSS custom properties across shadow DOM?
Yes, since color itself is an inherited property that crosses the shadow boundary, setting a custom property that ultimately controls color, combined with fill="currentColor" inside the component, works reliably.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG