View Encapsulation controls how a component's CSS is scoped — by default, Angular isolates each component's styles so they don't leak out to or get affected by other components. This solves CSS's global-scope problem.
({
: ,
: ,
: [],
})
{}
With the default Emulated mode, that h2 { color: blue } won't affect <h2>s in other components, and outside styles won't bleed into this one.
<!-- Angular adds unique attributes to scope the styles -->
<app-card _nghost-abc>
<h2 _ngcontent-abc>Title</h2>
</app-card>
<style>h2[_ngcontent-abc] { color: blue; }</style> <!-- scoped by attribute -->
Angular automatically adds unique _ngcontent/_nghost attributes to the component's elements and rewrites its CSS selectors to match only them — emulating scoped styles without needing native Shadow DOM.
ViewEncapsulation.Emulated (default) → scoped via added attributes (works everywhere)
ViewEncapsulation.ShadowDom → real browser Shadow DOM (true isolation)
ViewEncapsulation.None → NO scoping — styles are global (leak everywhere)
/* style a child component's internals from the parent */
:host { display: block; } /* the component's own host element */
:host(.active) { ... } /* host with a class */
::ng-deep .child-class { color: red; } /* pierce into children (use sparingly — deprecated-ish) */
:host styles the component's own root element; ::ng-deep forces a style through to descendants (powerful but discouraged — it breaks encapsulation).
View Encapsulation is why Angular components are safe to style in isolation — you can write h2 { color: blue } in one component without worrying about clobbering every <h2> in the app.
Understanding the default Emulated mode (and the None/ShadowDom alternatives, plus :host and ::ng-deep for intentional exceptions) is important for managing styles in large apps and for building component libraries where style leakage would be a serious problem.