- Angular的ViewEncapsulation即封装模式
- Native
- 原先浏览器 Shadow DOM 行为
- Native其作用是让组件样式不进不出，彻底封闭，全局样式也无法修改内部样式；
- 应该一般不会用，因为一般都想让外部的通用样式影响到内部，比如bootstrap的一些样式
- Angular将为组件创建Shadow DOM。
- 样式的范围是组件。
- Emulated
- 仿真模式，通过 Angular 来模拟类似 Shadow DOM 的行为，angular的默认方式
- Emulated，其作用是让组件的样式只进不出，换言之即组件内的样式不会影响到外部组件；
- 也就是说默认情况下，Angular内部component的样式并不会影响到上层，也就是不能操作上层的样式。编译后，不会把样式带上去。
- Angular不会为该组件创建Shadow DOM
- 样式将被限定于组件
- 这是封装的默认值。
- None
- 无任何封装行为
- None方式相当于，组件内部定义的样式都是又进又出，相对于定义的全局样式。（非特殊情况慎用）
- 可用于希望内部样式可以影响到外部时，或者说想在内部component中操作外部的样式时
- 没有Shadow DOM。
- 样式不在组件范围内。
- 根本原理
- Angular中的ViewEncapsulation是什么？
- Shadow DOM与Angular中的ViewEncapsulation
- Shadow DOM将 HTML 封装成HTML元素。使用Shadow DOM，标记，样式和行为被限制到元素，并且不会与DOM的其他节点发生冲突。Shadow DOM是Web Components的一部分，它封装了元素的样式和登录。
- Angular有它自己的模拟，它可以模拟Shadow DOM。为了模拟Shadow DOM并封装样式，Angular提供了View Encapsulation的类型。
- 理论上，Angular组件不是Web组件
- Angular的component封装了web前端开发的底层细节，模拟成了桌面程序的样子，把每个component作为了一个整体，为了减少开发复杂度，默认单向隔离了component和上层之间的样式关联
- 修改某个component的ViewEncapsulation
import { ViewEncapsulation } from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None
})
