View Encapsulation controla como o CSS de um componente é definido no escopo — por padrão, Angular isola o estilo de cada componente para que não vazem ou sejam afetados por outros componentes. Isso resolve o problema de escopo global do CSS.
({
: ,
: ,
: [],
})
{}
Com o modo padrão Emulated, aquele h2 { color: blue } não afetará <h2>s em outros componentes, e estilos externos não vão vazar para este.
<!-- 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 adiciona automaticamente atributos únicos _ngcontent/_nghost aos elementos do componente e reescreve seus seletores CSS para que correspondam apenas a eles — emulando estilos com escopo sem precisar do Shadow DOM nativo.
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 estiliza o próprio elemento raiz do componente; ::ng-deep força um estilo para os descendentes (poderoso mas desencorajado — quebra encapsulation).
View Encapsulation é por isso que componentes Angular são seguros para estilizar isoladamente — você pode escrever h2 { color: blue } em um componente sem se preocupar em danificar cada <h2> no aplicativo.
Compreender o modo padrão Emulated (e as alternativas None/ShadowDom, mais :host e ::ng-deep para exceções intencionais) é importante para gerenciar estilos em aplicativos grandes e para criar bibliotecas de componentes onde vazamento de estilos seria um problema sério.