Scribd
Upload
4 views

View Encapsulation

View Encapsulation in Angular manages how styles are applied to components, preventing style leakage and conflicts. There are three types of encapsulation: Emulated (default), ShadowDom (complete isolation), and None (global styles). It is recommended to use Emulated for most components, ShadowDom for complete isolation, and None only for global styles due to potential conflicts.

Uploaded by

shubhs1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

View Encapsulation

View Encapsulation in Angular manages how styles are applied to components, preventing style leakage and conflicts. There are three types of encapsulation: Emulated (default), ShadowDom (complete isolation), and None (global styles). It is recommended to use Emulated for most components, ShadowDom for complete isolation, and None only for global styles due to potential conflicts.

Uploaded by

shubhs1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

‭🚀 View Encapsulation in Angular‬

‭🔹 What is View Encapsulation?‬

I‭n Angular,‬‭View Encapsulation‬‭controls how styles‬‭are applied to components. It ensures that‬


‭styles defined in a component‬‭do not leak‬‭outside‬‭and‬‭are not affected‬‭by styles from other‬
‭components.‬

‭ y default, Angular‬‭encapsulates component styles‬‭to prevent conflicts between different‬


B
‭components.‬

‭🔹 Types of View Encapsulation in Angular‬


‭Angular provides‬‭three types‬‭of View Encapsulation:‬

‭Encapsulation‬ ‭Description‬ ‭Scoped‬ ‭ OM Style‬


D
‭Mode‬ ‭CSS?‬ ‭Isolation?‬

‭ mulated‬
E ✅
‭ Encapsulates styles at the component‬ ‭✅ Yes‬ ‭❌ No‬
‭(Default)‬ ‭level using‬‭scoped CSS‬‭(adds unique‬
‭attributes to elements).‬

‭ShadowDom‬ ✅
‭ Uses native‬‭Shadow DOM‬‭API to‬ ‭✅ Yes‬ ‭✅ Yes‬
‭completely isolate styles.‬

‭None‬ ‭ No encapsulation. Styles‬‭leak‬‭globally and‬ ‭❌ No‬


❌ ‭❌ No‬
‭apply everywhere.‬

‭1️⃣‬‭
ViewEncapsulation.Emulated‬‭(Default)‬
‭📌‬‭How It Works?‬

‭●‬ A
‭ ngular‬‭modifies class names in the styles‬‭so they‬‭only apply to the current‬
‭component.‬

‭●‬ ‭It‬‭prevents styles from affecting other components‬‭but still uses the global DOM.‬

‭✔‬‭Example:‬
‭import { Component, ViewEncapsulation } from '@angular/core';‬

‭@Component({‬
‭selector: 'app-dashboard',‬
‭templateUrl: './dashboard.component.html',‬
‭styleUrls: ['./dashboard.component.css'],‬
‭encapsulation: ViewEncapsulation.Emulated // 👈 Default behavior‬
‭})‬
‭export class DashboardComponent {}‬

‭✔‬‭Generated CSS in DOM:‬

‭.dashboard-title[_ngcontent-abc123] {‬
‭color: red;‬
‭}‬

✅
‭ ‬‭Scoped styles‬‭→ Only apply to this component.‬
❌
‭ ‬‭Not completely isolated‬‭→ Still exists in the global‬‭DOM.‬

2️⃣
‭ ‬‭ViewEncapsulation.ShadowDom‬‭(Native Shadow‬
‭DOM)‬
‭📌‬‭How It Works?‬

‭●‬ ‭Uses‬‭Shadow DOM‬‭to completely isolate styles from‬‭the rest of the application.‬

‭●‬ ‭Styles do‬‭not leak‬‭out, and‬‭external styles cannot‬‭affect this component‬‭.‬

‭✔‬‭Example:‬

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

‭@Component({‬
‭selector: 'app-dashboard',‬
‭templateUrl: './dashboard.component.html',‬
‭styleUrls: ['./dashboard.component.css'],‬
‭encapsulation: ViewEncapsulation.ShadowDom // 👈 Uses Shadow DOM‬
‭})‬
‭export class DashboardComponent {}‬
‭✔‬‭Generated DOM Structure (Inside Shadow Root):‬

‭<app-dashboard>‬
‭#shadow-root (closed)‬
‭<h1 class="dashboard-title">Dashboard</h1>‬
‭</app-dashboard>‬

✅
‭ ‬‭Fully isolated‬‭from global styles.‬
❌
‭ ‬‭External styles (like Bootstrap) won't work inside‬‭Shadow DOM‬‭.‬

‭3️⃣‬‭
ViewEncapsulation.None‬‭(No Encapsulation)‬
‭📌‬‭How It Works?‬

‭●‬ N
‭ o style isolation‬‭→ Styles defined in this component‬‭can‬‭affect the whole‬
‭application‬‭.‬

‭✔‬‭Example:‬

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

‭@Component({‬
‭selector: 'app-dashboard',‬
‭templateUrl: './dashboard.component.html',‬
‭styleUrls: ['./dashboard.component.css'],‬
‭encapsulation: ViewEncapsulation.None // 👈 No encapsulation‬
‭})‬
‭export class DashboardComponent {}‬

‭✔‬‭Result:‬

dashboard.component.css‬‭apply‬‭globally‬‭.‬
‭●‬ ‭Styles from‬‭

‭●‬ ‭Other components‬‭may get affected‬‭by these styles.‬

✅
‭ ‬‭Useful for global styles (e.g., themes).‬
❌
‭ ‬‭Risky for style conflicts!‬
‭🔹 When to Use Which Encapsulation Mode?‬
‭Use Case‬ ‭ ecommended‬
R
‭Encapsulation‬

‭✅ Default behavior for most components‬ ‭Emulated‬‭(Default)‬

‭✅ Need complete style isolation (e.g., web components)‬ ‭ShadowDom‬

❌
‭ Need global styles without isolation (not‬ ‭None‬
‭recommended)‬

‭🚀 Final Thoughts‬

✔ ViewEncapsulation.Emulated‬‭to scope styles within a‬


‭ ‬‭By Default:‬‭Angular uses‬‭
‭component.‬
‭✔‬‭Use‬‭
ShadowDom‬‭when‬‭you need complete style isolation‬‭(like Web Components).‬
‭✔‬‭Avoid‬‭
None‬‭unless you want‬‭global styles‬‭, as it‬‭can cause conflicts.‬

‭🎯‬‭Now you have full control over Angular styles!‬‭Let me know if you need examples! 😊‬

You might also like