What is Angular's default style encapsulation mechanism called?

What's really being asked

This question probes your understanding of Angular's default view encapsulation strategy, the compile-time mechanics that enforce it, and the directional limits of style isolation. Interviewers want to hear that you know the framework rewrites CSS selectors rather than relying on native browser boundaries, and that you can distinguish outward leakage prevention from full bidirectional isolation.

The full answer

First, name the concept as view encapsulation and state that the default mode is ViewEncapsulation.Emulated. Second, explain the exact mechanism: Angular generates a unique HTML attribute for each component instance, adds that attribute to every element in the component's template, and rewrites the component's CSS selectors to include that attribute. Third, clarify the guarantee: this prevents the component's styles from leaking out and affecting other components, but global styles defined outside the component can still affect elements inside it. Fourth, list the four available encapsulation modes in Angular: Emulated, ShadowDom, ExperimentalIsolatedShadowDom, and None. Fifth, mention that Emulated mode supports the :host pseudo-class by transforming it during compilation, but does not support other Shadow DOM pseudo-classes like ::shadow or ::part.

The mistakes people make

Claiming that Angular uses native Shadow DOM by default. Asserting that component styles are fully isolated in both directions. Describing the mechanism with vague hand-waving instead of citing the attribute selector rewrite. Recommending ::ng-deep as a standard solution rather than a discouraged legacy API. Confusing Angular's encapsulation with CSS Modules, inline styles, or manual BEM naming. Stating that lazy-loaded components require manual style imports, when Angular automatically includes associated styles even during lazy loading.

What usually comes next

How does Emulated encapsulation differ from ShadowDom at the browser level? When would you use ViewEncapsulation.None and what risks does it introduce? How does Angular handle the :host pseudo-class without native Shadow DOM? Why is ::ng-deep discouraged and what are modern alternatives? How do global CSS frameworks like Tailwind or Bootstrap interact with encapsulated components? What are the performance implications of generating unique attributes across a large application?

A concrete example

Imagine a ProfilePhoto component with a template containing an img element and a style rule setting border-radius to fifty percent. Angular compiles this rule into a selector that includes a generated attribute such as ngcontent-abc123 and applies it only to elements carrying that attribute. It also adds that same attribute to every element in ProfilePhoto's template, including the img. A neighboring Banner component will not have that attribute on its elements, so the border-radius rule cannot leak outward. However, a global style in styles.css setting a red border on all img elements will still affect ProfilePhoto's image because the global selector lacks the unique attribute and the element lives in the global document. If the component uses :host display block, Angular transforms it to target the host element with the generated attribute, keeping the styling local to the component instance.