View Encapsulation nadzira, kako so slogi komponente obsegani — privzeto Angular izolira sloge vsake komponente, da se ne razširijo na druge komponente in niso prizadeti zunanjimi slogi. To rešuje problem globalnega obsega CSS.
({
: ,
: ,
: [],
})
{}
S privzeto Emulated nastavitvijo h2 { color: blue } ne bo vplival na <h2> v drugih komponentah, in zunanji slogi se ne bodo razširili v to komponento.
<!-- 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 samodejno doda edinstven atribut _ngcontent/_nghost elementom komponente in ponovno zapiše njene CSS selektorje, da se ujemajo samo s temi — posnemajo obsegane sloge brez potrebe po nativnem 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 slogira lastni koren element komponente; ::ng-deep silno prepusti slog potomcem (močno, vendar odsvetovano — prekine encapsulation).
View Encapsulation je razlog, da so komponente Angular varne za oblikovanje v izolaciji — v eni komponenti lahko napišete h2 { color: blue } brez skrbi, da bi motili vse <h2> v aplikaciji.
Razumevanje privzete Emulated nastavitve (in None/ShadowDom alternativ, ter :host in ::ng-deep za namerne izjeme) je pomembno za upravljanje slogov v velikih aplikacijah in za gradnjo knjižnic komponent, kjer bi puščanje slogov bilo resno težavo.