在本文中，我们来看看ViewEncapsulation和Angular中的ShadowDOM。虽然听起来有些粗略，但不用担心。这实际上非常有帮助！
要理解Angular中的ViewEncapsulation，首先，我们应该了解ShadowDOM。您可以在这里详细了解ShadowDOM。简而言之，ShadowDOM将HTML封装成HTML元素。使用ShadowDOM，标记，样式和行为被限制到元素，并且不会与DOM的其他节点发生冲突。ShadowDOM是WebComponents的一部分，它封装了元素的样式和登录。
Angular部件由三件事组成：
组件类模板样式
这三个因素的结合使得Angular组件可以在应用程序中重用。理论上讲，当你创建一个组件时，通过某种方式创建一个Web组件（理论上，Angular组件不是Web组件）以利用ShadowDOM。您还可以在浏览器中使用Angular，它不支持ShadowDOM，因为Angular有它自己的模拟，它可以模拟ShadowDOM。
为了模拟ShadowDOM并封装样式，Angular提供了ViewEncapsulation的类型。他们如下：
让我们试着用一个例子来理解它。我已经创建了一个组件，如下所示：
app.