Chapter 2.4☕ 15 min read

View Encapsulation

View Encapsulation controls how your component styles are isolated from the rest of the app.

01What is View Encapsulation

View Encapsulation is Angular's mechanism for preventing component styles from leaking to other components and vice versa.

"Encapsulation = compound wall — tumhara style bahar nahi jayega." Just like a compound wall keeps your house private, view encapsulation keeps your component's styles private.

Angular has three modes of view encapsulation: Emulated (default), ShadowDOM (native), and None (no isolation). Let's explore each one.

02Emulated (Default)

Emulated is the default mode. Angular doesn't use real Shadow DOM — it emulates style scoping using HTML attributes.

Here's how it works step by step:

Angular generates a unique ID for your component — like _ngcontent-abc123
Angular adds this attribute to EVERY element in your component's template
Angular rewrites your CSS to include this attribute in the selector

Your original code:

h1 { color: red; }

Becomes:

h1[_ngcontent-abc123] { color: red; }

"Emulated = fake compound wall — kaam kartha hai but native nahi hai." It works perfectly in all browsers and gives you 95% of the benefits of real isolation.

03ShadowDOM (Native)

ShadowDOM mode uses the browser's native Shadow DOM API — the real deal.

@Component({\n  selector: 'app-card',\n  encapsulation: ViewEncapsulation.ShadowDom,\n  // ...\n})

How Shadow DOM works:

The browser creates a shadow root — a separate DOM tree attached to the element
Styles inside the shadow root CANNOT leak out
Global styles CANNOT penetrate into the shadow root
It's a true style boundary — completely isolated

"ShadowDOM = pucca compound wall — browser khud guard karta hai."

Limitations:

Not all CSS features work inside Shadow DOM (like ::ng-deep)
Global styles like CSS variables still work (they penetrate shadow boundaries)
Some third-party libraries might break if they expect access to the full DOM

04None (No Encapsulation)

None mode completely disables style encapsulation. Your component styles become global — they affect every component in your application.

@Component({\n  selector: 'app-card',\n  encapsulation: ViewEncapsulation.None,\n  styles: ['h1 { color: red; }']  // This h1 affects EVERYTHING!\n})

"None = compound wall tod diya — sabko pata chal jayega."

When to use None:

Overriding third-party component styles (like Angular Material)
Global theme components
Creating utility styles that need to work everywhere

Warning: None is dangerous if overused. With 50+ components, None mode makes your app's styles unpredictable and hard to debug.

05When to Use What

Here's a simple rule: 95% of the time, don't think about it — use the default.

Emulated (Default) — 95% of cases. Never change it unless you have a specific reason.
ShadowDOM — When building a reusable component library (like Angular Material) where true isolation matters.
None — When overriding third-party styles or creating global theme utilities.

"95% time mat socho, default hi best hai bhai." Angular's defaults are well-chosen. Don't switch modes without a clear reason.

Key Takeaways

✅ View Encapsulation prevents component styles from leaking to other components.
✅ Emulated (default) uses HTML attributes like _ngcontent-xyz to scope styles.
✅ ShadowDOM uses browser's native Shadow DOM API for true isolation.
✅ None disables encapsulation — styles become global, use carefully.
✅ Default (Emulated) is best for 95% of cases. Don't overthink it.

Previous2.3 — Styles 📋 All Chapters Next Chapter2.5 — Content Projection →