View Encapsulation kontrollerar hur en komponents CSS är begränsad — som standard isolerar Angular varje komponents stilar så de inte läcker ut till eller påverkas av andra komponenter. Detta löser CSS:s globala omfattningsproblem.
({
: ,
: ,
: [],
})
{}
Med standard Emulated-läget kommer h2 { color: blue } inte att påverka <h2>-element i andra komponenter, och externa stilar kommer inte att tränga in i denna.
<!-- 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 lägger automatiskt till unika _ngcontent/_nghost-attribut till komponentens element och skriver om dess CSS-väljare för att endast matcha dessa — emulerar begränsade stilar utan att behöva inbyggd 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 stilar komponentens eget rotelement; ::ng-deep tvingar en stil genom till underordnade (kraftfullt men avråds — det bryter encapsulation).
View Encapsulation är anledningen till att Angular-komponenter är säkra att stilisera i isolering — du kan skriva h2 { color: blue } i en komponent utan att oroa dig för att förstöra alla <h2>-element i appen.
Att förstå standard Emulated-läget (och None/ShadowDom-alternativen, plus :host och ::ng-deep för avsiktliga undantag) är viktigt för att hantera stilar i stora appar och för att bygga komponentbibliotek där stilläckage skulle vara ett allvarligt problem.