View Encapsulation styrer, hvordan en komponents CSS er omfattet — som standard isolerer Angular hver komponents stilarter så de ikke lækker ud til eller påvirkes af andre komponenter. Dette løser CSS's globale-omfatte-problem.
({
: ,
: ,
: [],
})
{}
Med standardtilstanden Emulated vil denne h2 { color: blue } ikke påvirke <h2>er i andre komponenter, og udvendige stilarter lækker ikke ind 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 tilføjer automatisk unikke _ngcontent/_nghost-attributter til komponentens elementer og omskriver dets CSS-selektorer for kun at matche dem — emulerer omfattede stilarter uden at have brug for nativt 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 typograferer komponentens eget rodelement; ::ng-deep tvinger en stil gennem til efterkommere (kraftig men frarådet — det bryder encapsulation).
View Encapsulation er grunden til, at Angular-komponenter er sikre at typografere isoleret — du kan skrive h2 { color: blue } i én komponent uden at bekymre dig om at ødelægge hver <h2> i appen.
Forståelsen af standardtilstanden Emulated (og alternativerne None/ShadowDom, plus :host og ::ng-deep til bevidste undtagelser) er vigtig for at styre stilarter i store apps og for at bygge komponentbiblioteker, hvor stillekning ville være et alvorligt problem.