Two strategies to prevent style leakage in reusable components and their trade-offs

WHAT THIS TESTS: The interviewer wants to know if you understand the boundary between a reusable component and its host environment. At the senior level, they are looking for awareness of runtime encapsulation versus build-time scoping, and the ability to trade off isolation against flexibility, performance, and framework constraints.

A GOOD ANSWER COVERS: First, Shadow DOM, which creates a hidden shadow tree attached to a shadow host so that internal CSS and DOM are isolated from the outer page. Pros include true style encapsulation and protection from external JavaScript or CSS accidentally breaking internals. Cons include difficulty with external theming, potential duplication of shared styles, and limited support for certain global CSS features like custom properties unless explicitly piped through. Second, build-time scoping such as CSS Modules, BEM naming conventions, or CSS-in-JS libraries that generate unique class names. Pros include lighter runtime overhead, easier theming via standard CSS cascades, and broad framework compatibility. Cons include reliance on tooling, the possibility of collision if the convention breaks, and lack of true DOM isolation so JavaScript can still reach internals. A great candidate explicitly mentions when to choose one over the other, for example using Shadow DOM for framework-agnostic web components and build-time scoping for React or Vue design systems.

COMMON WRONG ANSWERS: Relying on global CSS resets or !important as a primary strategy is a red flag because it does not prevent leakage, it only escalates specificity wars. Another anti-pattern is suggesting manual inline styles for every element, which destroys maintainability and still does not protect against host page specificity. Some candidates mention iframes; while they do isolate styles, they introduce massive performance and accessibility overhead that makes them unsuitable for component-level reuse.

LIKELY FOLLOW-UPS: The interviewer may ask how you would theme a Shadow DOM component from the outside, which tests knowledge of CSS custom properties and the part pseudo-element. They might also ask how you would share a common stylesheet across many Shadow DOM instances without duplication, or how server-side rendering interacts with shadow roots. Another follow-up is asking for a third strategy, such as container queries or layer usage, to see if you stay current with modern CSS.

ONE CONCRETE EXAMPLE: Imagine a button component in a design system. With Shadow DOM, the component ships its own button styles inside a shadow root, so a host page with h1 color red cannot accidentally turn the button red. However, if the design system wants to support a dark mode override from the host, the component must expose specific CSS custom properties like --button-bg for the host to set. With CSS Modules, the build step rewrites the button class to Button_module_primary__3x7a, preventing collision while still allowing the host application to override via standard cascade if needed, but a global rule like div padding 10px could still affect the component's internal layout because there is no DOM boundary.

Source: developer.mozilla.org