我们知道，在角应用组件默认视图封装被仿真，即
encapsulation: ViewEncapsulation.Emulated
我真不明白它是如何工作的篷子后面，如果它不是一个影子DOM。
Answer 1:
有三种类型的封装中的角
- ViewEncapsulation.Emulated这是默认设置
- ViewEncapsulation.None
- ViewEncapsulation.Native
仿真模式
假设你有两个不同的组件COMP-第一和COMP-第二，比如你，都是定义
<p> Some paragraph </p>
所以，如果你申请的一些造型在COMP-first.css款
p {
color: blue;
}
然后检查COMP-first.html p元素，寻找它的造型会发现这样的事情
p[_ngcontent-ejo-1] {
color: blue;
}
“_ngcontent-EJO-1”是从其它组件元件，用于分化这样的元件只是一个简单的键
无模式
如果应用此模式，例如COMP-第一这样的组件，然后你去检查任何元素，它将无法提供像“_ngcontent-EJO-1”的任何元素，因此应用将提供的任何样式或类别的属性全球。
本机模式
这应该给予同样的结果，如果你使用的是模拟的模式，但它与影子DOM技术，支持它的浏览器
Answer 2:
当你写
<div class="XXX"></div>
随着风格
XXX { color: red; }
编译器将它翻译成
<div class="XXX" ng_host_c22></div>
随着风格
XXX[ng_host_c22] { color: red; }
它只是增加了一个独特的（随机生成）属性，你的元素和风格，以避免它们与其他风格勾结。
这意味着，如果你声明类XXX在2个不同的组件，然后他们将有不同的属性，而不是串通。
文章来源: How default view encapsulation works in Angular
