angular样式封装

控制视图的封装模式：原生（Native）、仿真（Emulated）和无（None）。

通过在组件的元数据上设置视图封装模式，可以分别控制每个组件的封装模式。可选的模式有：

ShadowDom 模式使用浏览器原生的Shadow Dom实现来为组件的宿主元素附加一个Shadow Dom。组件的视图被附加到这个Shadow Dom中，组件的样式也被包含在这个Shadow Dom中（不进不出，没有样式能进来，组件样式出不去）。
Navtive 视图包装模式使用浏览器原生Shadow Dom的一个废弃的实现
Emulated 模式（默认）通过预处理（并改名）CSS低吗来模拟Shadow Dom的行为，以达到把CSS样式局限在组件视图中的目的。（只进不出，全局样式能进来，组件样式不出去）
None 意味着Angular不使用视图封装。Angular会把CSS添加到全局样式中。而不会进行作用于规则、隔离和保护等。从本质上将，这跟把组件的样式直接放进HTML是一样的（能进能出）

通过组件元数据中的encapsulation属性来设置组件封装模式：

@Component({
    //...
    encapsulation: ViewEncapsulation.ShadowDom,
})