View Encapsulation controlla come vengono applicate le restrizioni di ambito al CSS di un componente — per impostazione predefinita, Angular isola gli stili di ogni componente in modo che non si propaghino ad altri componenti né siano influenzati da loro. Questo risolve il problema dell'ambito globale del CSS.
({
: ,
: ,
: [],
})
{}
Con la modalità Emulated predefinita, quella h2 { color: blue } non influenzerà gli <h2> in altri componenti, e gli stili esterni non si propagheranno in questo.
<!-- 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 aggiunge automaticamente attributi univoci _ngcontent/_nghost agli elementi del componente e riscrive i selettori CSS in modo che corrispondano solo a essi — emulando stili con ambito limitato senza aver bisogno del nativo 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 stilizza l'elemento root del componente stesso; ::ng-deep forza uno stile attraverso i discendenti (potente ma sconsigliato — infrange l'encapsulation).
View Encapsulation è il motivo per cui i componenti Angular sono sicuri da stilizzare in isolamento — puoi scrivere h2 { color: blue } in un componente senza preoccuparti di sovrascrivere ogni <h2> nell'app.
Comprendere la modalità Emulated predefinita (e le alternative None/ShadowDom, più :host e ::ng-deep per eccezioni intenzionali) è importante per gestire gli stili in app di grandi dimensioni e per creare librerie di componenti dove la propagazione degli stili sarebbe un problema serio.