View Encapsulation kontroliuoja, kaip komponentės CSS yra apibrėžtas — pagal numatytuosius nustatymus, Angular izoliuoja kiekvieno komponento stilius, kad jie neuotruktų į kitus komponentus ir jie nesą veikiami iš išorės. Tai išsprendžia CSS globalinio aprėpties problemą.
({
: ,
: ,
: [],
})
{}
Su numatytąja Emulated režimu, tas h2 { color: blue } neturės įtakos <h2> elementams kituose komponentuose, ir išoriniai stiliai nepateks į šį komponentą.
<!-- 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 automatiškai prideda unikalius _ngcontent/_nghost atributus komponento elementams ir perrašo CSS selektorius, kad jie atitiktų tik juos — emuliuodama ribojamo apibrėžimo stilius be gimtojo 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 stilizuoja pačios komponento šakninio elemento; ::ng-deep priverstinai perduoda stilių palikuonims (galingas, bet nerekomenduojamas — tai sulaužo encapsulation).
View Encapsulation yra priežastis, dėl kurios Angular komponentai yra saugūs stilizuoti izoliacijoje — galite parašyti h2 { color: blue } viename komponente, nesijaudindami, kad pakenksite kiekvienam <h2> programoje.
Supratimas numatytojo Emulated režimo (ir None/ShadowDom alternatyvų, plius :host ir ::ng-deep sąmoningoms išimtims) yra svarbus stilių valdymui dideliuose programose ir komponentų bibliotekų kūrimui, kur stilių nuotėkis būtų rimta problema.