View Encapsulation controlează modul în care CSS-ul unei componente este scoped — implicit, Angular izolează stilurile fiecărei componente pentru ca acestea să nu se scurgă în alte componente și să nu fie afectate de acestea. Aceasta rezolvă problema scopului global al CSS.
({
: ,
: ,
: [],
})
{}
Cu modul implicit Emulated, acel h2 { color: blue } nu va afecta <h2>-urile din alte componente, și stilurile externe nu vor se scurge în aceasta.
<!-- 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 adaugă automat atribute unice _ngcontent/_nghost elementelor componentei și rescrie selectoarele CSS ale acesteia pentru a se potrivi doar cu acestea — emulând stiluri cu scop limitat fără a necesita Shadow DOM nativ.
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 stilizează propriul element rădăcină al componentei; ::ng-deep forțează un stil prin moștenitori (puternic dar descurajat — rupe encapsulation).
View Encapsulation este motivul pentru care componentele Angular sunt sigure de a fi stilizate izolat — poți scrie h2 { color: blue } într-o componentă fără să-ți faci griji că vei strica fiecare <h2> din aplicație.
Înțelegerea modului implicit Emulated (și alternativele None/ShadowDom, plus :host și ::ng-deep pentru excepții intenționate) este importantă pentru gestionarea stilurilor în aplicații mari și pentru construirea de biblioteci de componente unde scurgerea stilurilor ar fi o problemă serioasă.