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 कंपोनेंटच्या स्वतःच्या root घटकच्या शैलीची व्याख्या करते; ::ng-deep एक स्टाईल वंशजांना सक्तीने लागू करते (शक्तिशाली परंतु असुरक्षित — हे encapsulation तोडते).
View Encapsulation हेच कारण आहे की Angular कंपोनेंट विलगीकृत अवस्थेत स्टाईल करण्यासाठी सुरक्षित आहेत — एका कंपोनेंटमध्ये h2 { color: blue } लिहू शकता आणि अँपमधील प्रत्येक <h2> हटवण्याची चिंता न करता.
डिफॉल्ट Emulated मोड समजून घेणे (आणि None/ShadowDom पर्याय, तसेच इच्छापूर्ण अपवादांसाठी :host आणि ::ng-deep) मोठ्या अँपमध्ये स्टाईल व्यवस्थापित करण्यासाठी आणि कंपोनेंट लायब्ररी तयार करण्यासाठी महत्वाचे आहे जेथे स्टाईल रिसाव हा एक गंभीर समस्या असेल.