View Encapsulation tikontolla kif il-CSS tal-komponenti huwa skopit — b'mod default, Angular jiżola l-istili ta' kull komponenti sabiex ma jixxokx lill-komponenti oħra u ma jaffettwax minn oħrajn. Dan jsolvi l-problema tal-iskop globali tal-CSS.
({
: ,
: ,
: [],
})
{}
Bil-mod Emulated default, dak h2 { color: blue } mhux se jaffetwa l-<h2> f'komponenti oħra, u l-istili esterni mhux se jdaħlu lejn dan.
<!-- 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 awtomatikament iżżid attributi _ngcontent/_nghost uniċi għal-elementi tal-komponenti u jikteb mill-ġdid is-selettori CSS biex jaqblu biss magħhom — jamita l-istili skopieti mingħajr il-ħtieġa għan-Shadow DOM nattivu.
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 jistilizza l-element root tal-komponenti nnifsa; ::ng-deep jenfurzaed stil permezz għad-dixxendenti (qawwi iżda ma nirrakkmandax — jaqsam l-encapsulation).
View Encapsulation huwa għaliex il-komponenti ta' Angular siguri li jiġu stiliżżati b'iżolazzjoni — tista' tikteb h2 { color: blue } f'komponenti waħda mingħajr imħassba li tħarab kull <h2> fl-app.
L-għarfien tal-mod Emulated default (u l-alternativi None/ShadowDom, plus :host u ::ng-deep għal eċċezzjonijiet intenzjonali) huwa importanti għall-ġestjoni tal-istili f'apps kbar u għall-bini ta' libreriji ta' komponenti fejn it-tniqqija tal-istili tkun problema serijja.