View Encapsulation kontrolira kako je CSS komponente opsegnut — prema zadanoj vrijednosti, Angular izolira stilove svake komponente kako ne bi procurili niti bili zahvaćeni drugim komponentama. Ovo rješava problem globalnog dosega CSS-a.
({
: ,
: ,
: [],
})
{}
S zadanom Emulated vrstom, taj h2 { color: blue } neće utjecati na <h2> u ostalim komponentama, a vanjski stilovi neće procuriti u ovu.
<!-- 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 automatski dodaje jedinstvene _ngcontent/_nghost atribute elementima komponente i prepisuje njene CSS selektore kako bi odgovarali samo njima — simulirajući opsegnutih stilova bez potrebe za izvornom 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 skalira korijen element vlastite komponente; ::ng-deep forsira stil kroz potomke (moćno ali nesavjetovano — prekida enkapsulaciju).
View Encapsulation je razlog zašto su Angular komponente sigurne za stiliranje u izolaciji — možete napisati h2 { color: blue } u jednoj komponenti bez brige da ćete sabotirati sve <h2> u aplikaciji.
Razumijevanje zadane Emulated vrste (i None/ShadowDom alternativa, plus :host i ::ng-deep za namjerne iznimke) važno je za upravljanje stilovima u većim aplikacijama i za izgradnju biblioteka komponenti gdje bi procurljivanje stilova bilo ozbiljan problem.