HTML & CSS · Senior · Question 24 of 75
How do you style the inside of a Web Component when Shadow DOM isolates its styles?
- 1With global selectors plus
!important- they pierce the shadow root - ✓Correct answer: Through CSS variables (they inherit across the boundary) and
::part() - 3You can't: Shadow DOM completely forbids any outside styling
Explanation
Outside selectors don't reach into a shadow root, even with !important. But inherited properties (color, font) and custom properties cross the boundary - theming is built on them. The component author can expose parts via part="label", which are styled from outside with my-el::part(label). Slotted content (light DOM) is styled with regular CSS.