Course Progress 97%

Angular CSS Isolation & Encapsulation

← Angular Global Styles Angular Animations →

Angular CSS Isolation & Encapsulation का मतलब है component की CSS को बाकी application से अलग रखना, ताकि styles एक-दूसरे से टकराएँ नहीं और UI behavior predictable रहे। यह Angular की component-based architecture का एक core हिस्सा है और large applications में CSS chaos को रोकने का सबसे effective तरीका है।

इस chapter में हम Angular में CSS isolation कैसे achieve होती है, encapsulation के different modes क्या हैं, और real-world projects में किस approach को कब use करना चाहिए, यह detail में समझेंगे।

CSS Isolation क्या है

CSS Isolation का मतलब है:

  • एक component की CSS सिर्फ उसी component पर apply हो
  • दूसरे components unintentionally affect न हों
  • Global CSS से component सुरक्षित रहे

Angular by default हर component को isolated CSS environment देता है।

View Encapsulation का Role

Angular CSS isolation को implement करने के लिए View Encapsulation concept use करता है।

Angular तीन encapsulation modes provide करता है:

  • Emulated
  • None
  • ShadowDom

इन modes को component level पर configure किया जा सकता है।

ViewEncapsulation.Emulated (Default)

यह Angular का default mode है और most applications के लिए recommended भी।

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-box',
  standalone: true,
  encapsulation: ViewEncapsulation.Emulated,
  template: `<div class="box">Box</div>`,
  styleUrls: ['./box.component.css']
})
export class BoxComponent {}

Emulated कैसे काम करता है

  • Angular HTML elements पर unique attributes add करता है
  • CSS selectors को उन्हीं attributes के साथ rewrite करता है
  • Browser-level Shadow DOM की जरूरत नहीं होती

Result:
Component styles isolated रहते हैं, लेकिन browser compatibility पूरी रहती है।

ViewEncapsulation.None

इस mode में Angular encapsulation disable कर देता है।

@Component({
  selector: 'app-box',
  standalone: true,
  encapsulation: ViewEncapsulation.None,
  template: `<div class="box">Box</div>`,
  styleUrls: ['./box.component.css']
})
export class BoxComponent {}

None mode का behavior

  • Component CSS global CSS की तरह behave करती है
  • Styles पूरे application पर apply हो सकती हैं
  • Isolation नहीं रहती

कब use करें

  • Legacy CSS migrate करते समय
  • Third-party UI integration
  • Temporary overrides

लेकिन large projects में यह mode risky होता है।

ViewEncapsulation.ShadowDom

यह mode browser के native Shadow DOM का use करता है।

@Component({
  selector: 'app-box',
  standalone: true,
  encapsulation: ViewEncapsulation.ShadowDom,
  template: `<div class="box">Box</div>`,
  styleUrls: ['./box.component.css']
})
export class BoxComponent {}

ShadowDom mode कैसे काम करता है

  • Component DOM एक shadow root के अंदर render होता है
  • CSS completely isolated होती है
  • Global styles अंदर leak नहीं करतीं

यह true encapsulation देता है।

Limitations

  • Older browsers support issues
  • Global styles जैसे fonts manually handle करने पड़ते हैं
  • Debugging थोड़ा complex हो सकता है

Encapsulation Modes का Comparison

High-level difference:

  • Emulated → Angular-based isolation, safest default
  • None → No isolation, CSS leaks allowed
  • ShadowDom → Browser-native isolation, strict

:host Selector और Encapsulation

:host selector encapsulation के साथ closely related है।

:host {
  display: block;
  border: 1px solid gray;
}

यह component के root element को target करता है, चाहे encapsulation mode कुछ भी हो।

:host-context() और Isolation

:host-context() parent context के आधार पर styling allow करता है।

:host-context(.dark-theme) {
  background: #222;
  color: white;
}

यह isolation बनाए रखते हुए theme-based styling enable करता है।

Global Styles और Encapsulation का Interaction

  • Emulated mode में global styles component पर apply होती हैं
  • ShadowDom mode में global styles block हो जाती हैं
  • None mode में component styles global बन जाती हैं

इस interaction को समझना बहुत जरूरी है।

Deep Styling और Encapsulation

Encapsulation intentionally child component styling block करता है।

लेकिन कभी-कभी जरूरत पड़ती है।

::ng-deep .child-class {
  color: red;
}

Important points:

  • ::ng-deep deprecated है
  • Limited और controlled use करें
  • Alternative: global styles या component APIs

Real-World Strategy

Professional Angular projects में common strategy:

  • Default: ViewEncapsulation.Emulated
  • Global theme → styles.css
  • Deep overrides → minimal, documented
  • ShadowDom → specific reusable widgets

Common Mistakes

  • Encapsulation.None का overuse
  • Global CSS से component styling control करना
  • ShadowDom बिना browser support समझे use करना
  • Encapsulation concepts को ignore करना

Encapsulation क्यों जरूरी है

Angular CSS Encapsulation benefits:

  • No CSS conflicts
  • Predictable UI behavior
  • Reusable components
  • Large-scale apps में stability

Angular CSS Isolation & Encapsulation को सही तरह समझ लेने के बाद styling decisions clear हो जाते हैं। अगले chapter में हम Angular Animations को cover करेंगे, जहाँ styling और state changes animations के साथ integrate होते हैं।

← Angular Global Styles Angular Animations →
  • Home