View Encapsulation kontrollerer hvordan en komponents CSS er scoped — som standard isolerer Angular hver komponents stiler slik at de ikke lekker ut til eller påvirkes av andre komponenter. Dette løser CSSs globale-scope-problem.
({
: ,
: ,
: [],
})
{}
I standard Emulated-modus vil ikke den h2 { color: blue } påvirke <h2>-ene i andre komponenter, og eksterne stiler vil ikke lekke inn i denne.
<!-- 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 legger automatisk til unike _ngcontent/_nghost-attributter til komponentens elementer og omskriver CSS-velgerne slik at de bare matcher disse — det etterlikner scopede stiler uten å måtte bruke native 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 stil komponentens eget root-element; ::ng-deep tvinger en stil gjennom til etterkommere (kraftig men frarådet — det bryter encapsulation).
View Encapsulation er grunnen til at Angular-komponenter er trygge å style isolert — du kan skrive h2 { color: blue } i en komponent uten å bekymre deg for å ødelegge hver <h2> i appen.
Å forstå standard Emulated-modus (og None/ShadowDom-alternativene, pluss :host og ::ng-deep for bevisste unntak) er viktig for å håndtere stiler i store apper og for å bygge komponentbiblioteker der stillekkasje ville være et alvorlig problem.