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中文网其他相关文章！