Javascript 默认视图封装在角度视图中的工作方式

我们知道，angular应用程序中组件的默认视图封装是模拟的，即

encapsulation: ViewEncapsulation.Emulated

如果它不是阴影dom，我真的不明白它在引擎盖后面是如何工作的。

当你写作时

<div class="XXX"></div>

编译器将把它翻译成

<div class="XXX" ng_host_c22></div>

它只是向元素和样式添加一个唯一的随机生成的属性，以避免它们与其他样式相结合

---

这意味着，如果在两个不同的组件中声明类XXX，那么它们将具有不同的属性，而不是共谋

有三种类型的封装

ViewEncapsulation.Emulated，这是默认设置的 视图封装。无 ViewEncapsulation.Native 模拟模式 假设您有两个不同的组件comp-first和comp-second，例如，您在这两个组件中都定义了comp-first和comp-second

某段

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

p { 
   color: blue; 
 }

然后检查comp-first.html上的p元素，寻找它的样式，会发现类似这样的东西

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

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

无模式 如果您首先将此模式应用于此类组件（例如comp），然后再检查任何元素，则它不会向任何元素提供任何类似于_ngcontent-ejo-1的属性，因此应用任何样式或类都将全局提供

本机模式

---

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

您好，欢迎光临！这个问题有点宽泛，不是一个直接的编程问题，但是如果你四处搜索，有很多资源可以帮助你。角度文档总是一个很好的开始！这是参考资料-@One午餐人虽然我完全同意你的看法，但我认为这类问题已经足够清楚了，可以回答，而且没有任何冒犯的意图，也许OP需要对傻瓜进行解释，这是很好的一点，@trichetriche，谢谢你指出这个替代方案@一个午餐人。。我的问题不是angular如何处理组件的样式，它在文档中写得很好。我要问的是，如果不是影子dom，dom树是如何使用自定义html标记（即组件选择器）形成的。我尝试过搜索这个，但没有找到好的文档。希望我的问题现在清楚了。没关系，你从一开始就清楚了。从文档中获得一个起点可以导致阅读模拟本机范围，这在搜索中可以快速显示超深度的文章，如：。快乐编码！

p { 
   color: blue; 
 }

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