ViewEncapsulation 如何在 Angular 中運作：Shadow DOM、模擬和無模式

在 Angular 中，視圖封裝是一個基本概念，它可以讓開發人員控制元件樣式在應用程式中的應用方式。視圖封裝有助於保持一致的樣式，避免意外的樣式衝突，並提高 CSS 的可維護性。 Angular 提供了三個主要的封裝選項：ShadowDom、Emulated 和 None。

在深入研究之前，了解 Web 開發的一個核心思想會很有幫助：Shadow DOM。

---

什麼是 Shadow DOM？

將 Shadow DOM 視為遊戲王！ Web 元件的 Shadow Realm。它是 DOM 中的一個單獨的“子樹”，其中包含樣式和腳本 - 很像卡片和角色如何“放逐”到影子領域，對外界隱藏。此領域（或在本例中為 Shadow DOM）中的樣式不會幹擾更廣泛的頁面樣式。這種隔離意味著樣式和功能可以整齊地封裝在元件內，避免全域 CSS 混亂。

如果沒有 Shadow DOM，開發人員經常會遇到元件間不可預測的全域 CSS 樣式衝突的問題。例如，全域定義的 h1 樣式在一個元件中可能看起來不錯，但當它幹擾另一個元件的佈局時突然成為一個問題。

---

Angular 的視圖封裝選項

Angular 提供了三個選項來幫助有效管理元件樣式。詳細介紹如下：

1. ShadowDom

透過 ShadowDom，Angular 使用瀏覽器內建的 Shadow DOM 來封裝樣式。其工作原理如下：

• 隔離：樣式嚴格限制在組件內。它們不會影響外部元素，外部樣式也不會滲透進來。
• 範圍樣式：樣式僅適用於元件，不適用於應用程式的其餘部分。這使得管理和測試元件變得更加容易，而不必擔心意外的樣式衝突。

範例場景：
想像一下，無論全域應用的其他按鈕樣式如何，元件中的按鈕都應始終為藍色。使用 ShadowDom，該藍色按鈕將保持藍色，沒有任何外部樣式覆蓋。

當您需要完全獨立的樣式時，ShadowDom 封裝是理想的選擇。但請注意，並非每個瀏覽器都完全支援 Shadow DOM 功能，因此請根據您的專案要求驗證相容性。

2. 模擬

這是 Angular 的預設視圖封裝模式。它透過重寫 CSS 選擇器以專門針對元件的樣式範圍來模擬 Shadow DOM。它的作用如下：

• 無 Shadow DOM：與 ShadowDom 模式不同，它不使用真正的 Shadow DOM。
• 作用域樣式：Angular 重寫了 CSS，因此樣式僅限於組件的元素，避免了意外的樣式重疊。

範例場景：
如果您使用類比封裝來設計卡片組件的樣式，卡片內的樣式不會意外影響使用類似類別的其他元件。即使沒有真正的 Shadow DOM，它也可以透過模仿元件封裝的方式界定樣式的範圍來提供良好的隔離。

此選項對於您希望在沒有瀏覽器限製或複雜配置的情況下進行樣式隔離的應用程式很有用。但請記住：模擬封裝並非完美無缺，在全域共享複雜樣式時仍可能導致偶爾的衝突。

3. 無

在這個模式下，根本沒有封裝。樣式被加到全域範圍，影響應用程式中的每個符合元素。

• 全域樣式：一個元件的樣式可以套用在應用程式中的任何位置，進而影響其他元件和元素。
• 小心使用：當您需要真正全域的樣式（例如重設樣式表或主題以實現一致的應用程式範圍樣式）時，無模式會很有幫助。

範例場景：
假設您正在建立具有特定配色方案的表單，並希望這些樣式應用於應用程式中的所有表單。透過將視圖封裝設定為 None，您可以確保您的樣式在全域範圍內傳播。然而，如果不同的元件需要不同的樣式，這種方法是有風險的，因為樣式很容易發生衝突。

---

沒有封裝的樣式的鬥爭

如果沒有封裝（例如，將樣式設為 None），CSS 會感覺像是一場永無止境的戰鬥。組件可能會在不知不覺中覆蓋彼此的樣式，從而產生難以調試和維護的問題。這種缺乏分離導致了意想不到的風格衝突。例如，在全域 .button 類別上設定填滿值可能會意外改變應用程式各個部分的按鈕外觀，從而破壞 UI 一致性。

在大型多元件應用程式中，管理沒有封裝的樣式尤其棘手。開發人員經常發現自己不斷調整選擇器或添加 !important 來強制樣式，這是 CSS 中臭名昭著的反模式。這些 hack 使程式碼更難以維護，並導致難以調試的意大利麵條式 CSS。

封裝如何影響樣式

每種模式都會影響樣式的套用位置和方式。總結如下：

• ShadowDom：將樣式保留在組件的影子 DOM 內，確保不會洩漏到更廣泛的 DOM 或從更廣泛的 DOM 洩漏。
• 模擬：將範圍樣式新增至，僅將它們套用於元件元素。
• 無：全域添加樣式，允許它們應用於應用程式中的任何位置，這可能會導致衝突。

對於「模擬」和「無」模式，Angular 會為文件的

新增樣式。即使一個元件位於另一個使用 Shadow DOM 的元件內，來自 None 和 Emulated 封裝的樣式也會影響它，從而可能導致樣式衝突。

---

結論：選擇正確的封裝模式

在大多數情況下，本文在很大程度上是無關緊要的，因為您通常希望堅持使用預設設定：在「模擬」模式下查看封裝。這種模式通常足以滿足大多數 Angular 應用程式的需求，可以實現乾淨、無衝突的樣式，而無需過度隔離元件。只有當您有需要不同方法的獨特需求時才考慮切換到 Shadow DOM 或 None。接受預設值有助於保持應用程式樣式的一致性和簡單性。

---

進一步學習的資源

以下是一些了解 Angular 中視圖封裝的寶貴資源：

1. Angular 官方文件 - 視圖封裝
   
   角度視圖封裝

2. MDN Web 文件 - Shadow DOM
   
   MDN 上的 Shadow DOM

3. Web.dev - Shadow DOM
   
   Web.dev - Shadow DOM

以上是ViewEncapsulation 如何在 Angular 中運作：Shadow DOM、模擬和無模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！