View Encapsulation yana sarrafa yadda CSS na haɗin gida ke ɗaga waje — ta tsinkayi, Angular ya keɓi shafukan kowane abin ɗada} da sarari sosai don kada su tafi wajen ko kada su shafi sauran abubuwan. Wannan yana warware matsalar jiya na CSS.
({
: ,
: ,
: [],
})
{}
Tare da rashin jarida Emulated mode, wannan h2 { color: blue } bai shafi <h2> a cikin wasu abubuwa ba, kuma jiya na wajen bai shiga gida wannan ba.
<!-- 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 ta kara allunan _ngcontent/_nghost na musamman zuwa abubuwan abin ɗada, kuma ta sake rubuta zaɓaɓɓen CSS don kufai su daidai da su kawai — yana karɓata jiya mai tsarki ba tare da bukatawar jiya na ayaba na Shadow ba.
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 yana shafin abin da aka daidaita na haɗin gida; ::ng-deep yana wajein shafi ta dajji (mai karfi amma ba a jamantawa ba — yana karye encapsulation).
View Encapsulation shine dalilin da Angular abubuwan amintacce suke shafawa shi kaɗai — kaka zaka iya rubuta h2 { color: blue } a cikin haɗin gida daya ba tare da damuwa game da karyar kowane <h2> a cikin aikace-aikacen ba.
Tubatantawa a tsinkayi Emulated mode (da None/ShadowDom zaɓuwan, da :host da ::ng-deep don ƙayyade masu amfani) mahalci ne don sarrafa shafuka a manyan aikace-aikace kuma don ginawa ɗakin abubuwan inda rage shafa zai zama matsala mai tsanani.