View Encapsulation Modes

## Where the setting lives Every Angular component has a **view encapsulation** mode that decides how far its styles (from `styles`, `styleUrl`, or a `<style>` element in its template) can reach. You set it with the `encapsulation` field of `@Component`, using the `ViewEncapsulation` enum from `@angular/core`. If you set nothing, the component uses `Emulated`. ## The four modes at a glance | Mode | Mechanism | Styles leak out? | Outside styles reach in? | |---|---|---|---| | `Emulated` (default) | compile-time selector rewrite plus attributes | no | yes, global styles apply | | `ShadowDom` | native open shadow root on the host | no | document stylesheets no; Angular's shared component styles are copied in | | `ExperimentalIsolatedShadowDom` | native shadow root, no shared styles | no | no, only the component's own styles | | `None` | no scoping at all | yes, rules are global | yes | The enum value `1` is missing on purpose: it was the old `Native` mode, removed in v11. ## Emulated: scoping without Shadow DOM The compiler appends an attribute selector such as `[_ngcontent-ng-c1234]` to each compound selector in the component's CSS, and turns `:host` into `[_nghost-ng-c1234]`. At runtime the renderer adds the matching attribute to every element the component's template creates, and the host attribute to the host element. Because the rules now require that attribute, they cannot match anything outside the component. Global styles are untouched, so they still apply inside. A component with no styles at all is quietly compiled as `None`, since there is nothing to scope. ## ShadowDom: real isolation, real side effects With `ShadowDom` Angular calls `attachShadow({ mode: 'open' })` on the host and renders the template and the component's styles into that shadow tree. Consequences worth naming in an interview: - **Document stylesheets stop matching inside.** A global rule for `button` no longer styles the component's buttons; only inherited properties and custom properties cross the boundary. - **Angular's shared styles are copied in.** Styles of the application's `Emulated` and `None` components are added to each shadow root, so a `None` component's global-looking rules still apply there. `ExperimentalIsolatedShadowDom` exists precisely to leave these out, so that only the component's own styles apply. - **More than CSS changes.** Events are retargeted at the shadow boundary, native `<slot>` semantics come into play, and the browser's dev tools show a shadow tree. The docs tell you to understand these implications before enabling the mode. - **Selectors are evaluated natively.** `:host` and `:host-context()` are left to the browser rather than rewritten, so browser support rules apply. ## None: global by choice `ViewEncapsulation.None` skips all rewriting. The component's rules are added to the document when the component renders and behave like any global stylesheet, matching elements anywhere, including inside other components. That is occasionally useful for a deliberately global theme component, but every selector must be written defensively (prefixed with a class the component owns), and the styles are removed again once no instance remains, which surprises code that relied on them. ## Common misconceptions - **"Emulated uses Shadow DOM."** It uses no shadow root at all; the scoping is pure compile-time rewriting plus attributes. - **"Encapsulation blocks global CSS."** `Emulated` lets global rules in freely; `ShadowDom` keeps document stylesheets out but still receives Angular's shared component styles; only `ExperimentalIsolatedShadowDom` keeps both out. - **"None is just Emulated without the attribute noise."** Removing the attributes removes the scoping: every rule becomes page-wide. - **"ShadowDom is a drop-in upgrade."** It changes event retargeting, projection semantics and how tests query the DOM, so switching an existing component is a behaviour change. ## Choosing a mode 1. Keep **`Emulated`** for almost everything; it is the default for good reasons and works everywhere. 2. Reach for **`ShadowDom`** when you need true isolation from document styles, for example a widget embedded in pages you do not control, and accept the event, slot and tooling differences. 3. Consider **`ExperimentalIsolatedShadowDom`** only when even Angular's shared styles must stay out, remembering it is experimental. 4. Use **`None`** sparingly, with prefixed selectors, and document why the component's styles are global. A related rule of thumb: the mode is a property of the component that declares the styles. A parent's mode never changes how a child's styles are scoped, and switching a parent to `None` does not let a child's styles out.