View Encapsulation bepaalt hoe de CSS van een component wordt scoped — standaard isoleert Angular de stijlen van elke component zodat ze niet naar andere componenten lekken en daar niet door worden beïnvloed. Dit lost het global-scope-probleem van CSS op.
({
: ,
: ,
: [],
})
{}
In de standaard Emulated-modus zal die h2 { color: blue } de <h2>'s in andere componenten niet beïnvloeden, en externe stijlen zullen hier niet in lekken.
<!-- 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 voegt automatisch unieke _ngcontent/_nghost-attributen toe aan de elementen van de component en herschrijft de CSS-selectors ervan zodat ze alleen deze aantreffen — het nabootst scoped stijlen zonder dat native Shadow DOM nodig is.
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 stijleert het eigen root-element van de component; ::ng-deep forceert een stijl door naar onderliggende elementen (krachtig maar ontmoedigd — het breekt encapsulation).
View Encapsulation is waarom Angular-componenten veilig geïsoleerd kunnen worden opgemaakt — je kunt h2 { color: blue } in één component schrijven zonder je zorgen te maken dat je elke <h2> in de app vernielt.
Inzicht in de standaard Emulated-modus (en de None/ShadowDom-alternatieven, plus :host en ::ng-deep voor opzettelijke uitzonderingen) is belangrijk voor het beheren van stijlen in grote apps en voor het bouwen van componentbibliotheken waar stijllekkage een ernstig probleem zou zijn.