在本文中，我們來看看ViewEncapsulation和Angular中的Shadow DOM。雖然聽起來有些粗略，但不用擔心。這實際上非常有幫助！
要理解Angular中的ViewEncapsulation，首先，我們應該了解 Shadow DOM。您可以在這裡詳細了解 Shadow DOM。簡而言之，Shadow DOM將 HTML 封裝成HTML元素。使用Shadow DOM，標記，樣式和行為被限制到元素，並且不會與DOM的其他節點發生衝突。Shadow DOM是Web Components的一部分，它封裝了元素的樣式和登錄。
Angular部件由三件事組成：
組件類模板樣式
這三個因素的結合使得Angular組件可以在應用程式中重用。理論上講，當你創建一個組件時，通過某種方式創建一個Web組件（理論上，Angular組件不是Web組件）以利用Shadow DOM。您還可以在瀏覽器中使用Angular，它不支持Shadow DOM，因為Angular有它自己的模擬，它可以模擬Shadow DOM。
為了模擬Shadow DOM並封裝樣式，Angular提供了View Encapsulation的類型。他們如下：
讓我們試著用一個例子來理解它。我已經創建了一個組件，如下所示：
app.component.ts
import { Component, ViewEncapsulation } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],encapsulation: ViewEncapsulation.None})export class AppComponent {title = 'parent component';}
app.component.html app.component.css
h1 {background: red;color: white;text-transform: uppercase;text-align: center;}
我們正在設置 h1 組件CSS的樣式。我們還創建了另一個組件：
import { Component } from '@angular/core';@Component({selector: 'app-child',template: `<h1>{{title}}</h1>`})export class AppChildComponent {title = 'child app';}
在 AppChildComponent，我們也使用 h1 標籤。要了解不同的 ViewEncapsulation 選項，我們將更改元數據 AppComponent。
讓我們從ViewEncapsulation.None開始，在這個選項中：
沒有陰影DOM。樣式不在組件範圍內。
在運行應用程式時，h1 即使我們僅設置了樣式，也會發現 樣式已適用於這兩個組件 AppComponent。 發生這種情況是因為 AppComponent 我們已經將封裝屬性設置為 ViewEncapsulation.None。
@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],encapsulation: ViewEncapsulation.None})export class AppComponent {title = 'parent component';}
在瀏覽器中，當您檢查原始碼時，您會發現該 h1 樣式已在DOM的頭部聲明。
因此，在 ViewEncapsulation.None中，風格被移動到DOM的頭部，而不是作用域的組件。組件沒有Shadow DOM，組件樣式可以影響DOM中的所有節點。
接下來，讓我們探索ViewEncapsulation.Native，在這個選項中：
Angular將為組件創建Shadow DOM。樣式的範圍是組件。
在運行應用程式時，您會發現該 h1樣式已應用於這兩個組件，儘管我們只在其中設置了樣式 AppComponent。發生這種情況是因為 AppComponent 我們已經將封裝屬性設置為 ViewEncapsulation.Native，並且我們正在使用 AppChildComponnet 模板內的子項 AppComponent。
import { Component, ViewEncapsulation } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],encapsulation: ViewEncapsulation.Native})export class AppComponent {title = 'parent component';}
在瀏覽器中，當您檢查原始碼時，您將為該DOM創建一個Shadow DOM， AppComponent 並且該風格的範圍就是這個範圍。
因此， ViewEncapsulation.Native Angular創建了一個Shadow DOM，並將該風格的作用域限定為該Shadow DOM。
接下來，讓我們探索ViewEncapsulation.Emulated，在這個選項中：
Angular不會為該組件創建Shadow DOM。樣式將被限定於組件。這是封裝的默認值。
import { Component, ViewEncapsulation } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],encapsulation: ViewEncapsulation.Emulated})export class AppComponent {title = 'parent component';}
當你運行應用程式，你會發現， h1 從風格 AppComponent 不應用到 h1 的 AppChildComponent。這是由於仿效範圍。在此，該樣式僅限於組件。在這個選項中，Angular只模擬Shadow DOM，並不創建真正的陰影DOM。因此，在瀏覽器中運行的應用程式也不支持Shadow DOM，並且樣式也被限定在組件中。
讓我們看看Angular如何實現這一點。在瀏覽器中，當您檢查原始碼時，您會找到答案。
Angular在DOM的頭部創建了樣式，並給出了組件的任意標識。在ID的基礎上，選擇器樣式被限定到組件。
這些是Angular提供的三種ViewEncapsulation選項。我希望你覺得這篇文章有用。謝謝閱讀。如果你喜歡這篇文章，請分享。