Compare Angular's three ViewEncapsulation modes and give a use case.

WHAT THIS TESTS: Whether the candidate understands the difference between simulated and native style encapsulation, how Angular rewrites CSS under the hood, and the architectural tradeoffs of leaking styles globally. Seniors should know when to preserve the default and when native Shadow DOM or global scoping is justified.

A GOOD ANSWER COVERS: First, Emulated is the default and works by adding a unique host attribute like _nghost-a-1 to the component element and corresponding scoped attributes like _ngcontent-a-1 to child elements, then rewriting the component CSS to target those attributes. Second, ShadowDom uses the browser's native ShadowRoot API, creating a true boundary where external styles do not penetrate and internal styles do not leak, which matters for web components or strict widget isolation. Third, None disables all scoping so component CSS is injected globally into the document head, making selectors act exactly as written with no rewriting. Fourth, a practical use case for switching away from Emulated: choose ShadowDom when building embeddable widgets or micro-frontends that must resist host application style pollution, or choose None when a component intentionally provides global utility classes or overrides third-party library styles that would otherwise be blocked by attribute scoping.

COMMON WRONG ANSWERS: Saying Emulated uses the browser's native Shadow DOM rather than attribute rewriting. Claiming ShadowDom is always better for performance when it actually adds DOM overhead and can complicate event retargeting or global theming. Recommending None for routine development without acknowledging that it breaks isolation and causes unpredictable style collisions across teams. Failing to mention that Emulated is the safest default for most applications because it balances isolation with theming flexibility.

LIKELY FOLLOW-UPS: How does Angular rewrite CSS selectors in Emulated mode? What are the implications of ShadowDom for content projection and global CSS variables? How would you debug a style leak in a large application using None? When would you combine None with a CSS-in-JS or BEM strategy to mitigate global pollution?

ONE CONCRETE EXAMPLE: Imagine a design-system button component that must render identically inside a legacy React app. If the host application has aggressive global CSS resets, Emulated might still be vulnerable to inherited properties or specific global rules. Switching to ShadowDom guarantees the button's internal styles are protected by a real shadow boundary. Conversely, imagine a theme-overrides component that injects CSS custom property definitions for brand colors; using None ensures those variables are defined at the document level and accessible to all child components without selector rewriting stripping the rules.