javascript - 默认 View 封装在 Angular 中是如何工作的

Question

众所周知，angular应用中组件的默认 View 封装是Emulated的，即

encapsulation: ViewEncapsulation.Emulated

如果它不是 shadow dom，我真的不明白它是如何工作的。

Answer 1

angular中的三种封装

• ViewEncapsulation.Emulated，这是默认设置
• ViewEncapsulation.None
• ViewEncapsulation.Native

模拟模式

假设您有两个不同的组件 comp-first 和 comp-second ，例如您在这两个组件中定义

<p> Some paragraph </p>

因此，如果您在 comp-first.css 中为段落应用一些样式

p { 
   color: blue; 
 }

然后检查 comp-first.html 上的 p 元素并查找其样式会发现类似这样的内容

p[_ngcontent-ejo-1] {
  color: blue;
}

“_ngcontent-ejo-1”只是一个简单的键，用于将此类元素与其他组件元素区分开来

无模式

如果您将此模式应用于这样的组件，例如 comp-first 然后您去检查任何元素，它不会向任何元素提供任何属性，如“_ngcontent-ejo-1”，因此应用任何样式或类将在全局范围内提供。

原生模式

这应该会产生与使用模拟模式相同的结果，但它在支持它的浏览器中附带了 Shadow DOM 技术