Angular में View Encapsulation क्या है?

Question

Accepted Answer

**View Encapsulation** नियंत्रित करता है कि एक component की CSS कैसे scoped है — डिफ़ॉल्ट रूप से, Angular **प्रत्येक component की शैलियों को अलग करता है** ताकि वे बाहर न निकलें या अन्य components से प्रभावित न हों। यह CSS की global-scope समस्या को हल करता है। ## यह महत्वपूर्ण क्यों है ```ts @Component({ selector: "app-card", template: `

Title

`, styles: [`h2 { color: blue; }`], // ONLY affects this component's

// encapsulation: ViewEncapsulation.Emulated (the default — no need to specify) }) export class CardComponent {} ``` डिफ़ॉल्ट `Emulated` मोड के साथ, वह `h2 { color: blue }` अन्य components में `

` को प्रभावित नहीं करेगा, और बाहरी शैलियां इसमें नहीं घुसेंगी। ## Emulated हुड के नीचे कैसे काम करता है ```html
Title
``` Angular स्वचालित रूप से component के elements में अद्वितीय `_ngcontent`/`_nghost` attributes जोड़ता है और अपने CSS selectors को केवल उन्हें match करने के लिए फिर से लिखता है — native Shadow DOM की आवश्यकता के बिना scoped शैलियों का अनुकरण करता है। ## तीन मोड ```text 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) ``` ## जब आवश्यक हो encapsulation को भेदना ```css /* 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` component के अपने root element को style करता है; `::ng-deep` descendants के माध्यम से एक style को force करता है (शक्तिशाली लेकिन हतोत्साहित — यह encapsulation को तोड़ता है)। ## यह महत्वपूर्ण क्यों है View Encapsulation यही कारण है कि Angular components अलगाव में style करने के लिए सुरक्षित हैं — आप एक component में `h2 { color: blue }` लिख सकते हैं बिना यह चिंता किए कि आप app में हर `

` को खराब कर देंगे। डिफ़ॉल्ट `Emulated` मोड (और `None`/`ShadowDom` विकल्प, साथ ही `:host` और `::ng-deep` intentional exceptions के लिए) को समझना बड़े apps में शैलियों को manage करने और component libraries बनाने के लिए महत्वपूर्ण है जहां style leakage एक गंभीर समस्या होगी।