View Encapsulation ఒక భాగం యొక్క CSS ఎలా పరిధిబద్ధమైనదో నియంత్రిస్తుంది — డిఫాల్ట్గా, Angular ప్రతిটి భాగం యొక్క శైలిలను ఎంచుకుంటుంది కాబట్టి అవి ఇతర భాగాలకు లీక్ చేయవు లేదా బాహ్య శైలిల ద్వారా ప్రభావితం కాకుండా ఉంటాయి. ఇది CSS యొక్క గ్లోబల్-స్కోప్ సమస్యను పరిష్కరిస్తుంది.
({
: ,
: ,
: [],
})
{}
డిఫాల్ట్ Emulated మోడ్లో, ఆ h2 { color: blue } ఇతర భాగాలలో <h2>లను ప్రభావితం చేయదు, మరియు బాహ్య శైలిలు ఇందులోకి ప్రవేశించవు.
<!-- 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 స్వయంచాలకంగా _ngcontent/_nghost ప్రత్యేక లక్షణాలను భాగం యొక్క మూలకాలకు జోడిస్తుంది మరియు దాని CSS సెలెక్టర్లను వీటితో సరిపోయేటట్లు తిరిగి వ్రాస్తుంది — నేటివ్ 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 భాగం యొక్క సొంత రూట్ మూలకను స్టైల్ చేస్తుంది; ::ng-deep శైలిను సంతతీకరణకు బలవంతం చేస్తుంది (శక్తివంతమైనది కానీ నిరుత్సాహపడింది — encapsulationను విచ్ఛిన్నం చేస్తుంది).
View Encapsulation Angular భాగాలు ఒకట్లో స్టైల్ చేయడానికి సురక్షితమైనవి ఎందుకు అనేది — ఒక భాగంలో h2 { color: blue } వ్రాయవచ్చు అ్యాప్లో ప్రతిটి <h2>ను ధ్వంసం చేయకుండా.
డిఫాల్ట్ Emulated మోడ్ను గ్రహించడం (మరియు None/ShadowDom ప్రత్యామ్నాయాలు, కూడా :host మరియు ::ng-deep ఉద్దేశపూర్వక మినహాయింపుల కోసం) పెద్ద అ్యాప్లలో శైలిలను నిర్వహించడానికి మరియు శైలి లీకేజ్ గుండెలో సమస్య అయిన భాగం లైబ్ररీలను నిర్మించడానికి ముఖ్యమైనది.