View Encapsulation hallitsee, kuinka komponentin CSS-säännöt rajataan — oletusarvoisesti Angular eristää jokaisen komponentin tyylit niin, etteivät ne pääse muihin komponentteihin tai niihin ei vaikuta ne. Tämä ratkaisee CSS:n globaalin kattavuuden ongelman.
({
: ,
: ,
: [],
})
{}
Oletusarvoisesti Emulated-tilassa tämä h2 { color: blue } ei vaikuta <h2>-elementteihin muissa komponenteissa, eikä ulkoiset tyylit pääse tähän komponenttiin.
<!-- 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 lisää automaattisesti ainutlaatuiset _ngcontent/_nghost-attribuutit komponentin elementteihin ja kirjoittaa sen CSS-valitsimet uudelleen vastaamaan vain niihin — jäljittelee rajattuja tyylejä ilman, että tarvitsee natiivia Shadow DOM:ia.
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 tyylittää komponentin omaa juurielementtiä; ::ng-deep pakottaa tyylin jälkeläisille (tehokas mutta ei suositeltava — se rikkoo encapsulationin).
View Encapsulation on syy siihen, miksi Angular-komponentit ovat turvallisia tyylitettäväksi eristyksissä — voit kirjoittaa h2 { color: blue } yhdessä komponentissa huolimatta siitä, että rikkoisit jokaisen <h2> sovelluksessa.
Oletusarvon Emulated-tilan ymmärtäminen (ja None/ShadowDom-vaihtoehdot sekä :host ja ::ng-deep tarkoituksellisille poikkeuksille) on tärkeää tyylejä hallittaessa suurissa sovelluksissa ja komponenttikirjastoja rakennettaessa, jossa tyylin vuoto olisi vakava ongelma.