ViewEncapsulation

参考：https://segmentfault.com/a/1190000008677532

encapsulate的值：Emulated（默认），None，Native
Emulate：[ˈemjuleɪt]，仿真

• emulated：无 Shadow DOM（影子dom），但是通过 Angular 提供的样式包装机制来封装组件，使得组件的样式不受外部影响。这是 Angular 的默认设置。eg： [_ngcontent-cmy-0] => 使得组件的样式不受外部影响。

• Native：使用原生的 Shadow DOM 特性。eg：#shadow-root

• None：无 Shadow DOM，并且也无样式包装 => 所有的样式都应用到整个 document，换句话说，组件的样式会受外界影响，可能被覆盖掉。

eg：h2标签
全局样式style.scss：color：yellow
子页面-red页面：color:red
子页面-blue页面：color:blue
子页面-green页面：color:green

假如都是默认设置（Emulated），都是维持自己组件的颜色！
此时，如果全局样式的层级高的时候(eg:用important)，都是用全局样式的！
如果只有red页面有颜色，那么也是只有red页面会有颜色，不会扩展出去到别的组件！

假如子页面没有设置颜色，那么继承全局样式的颜色！
如果子页面设置Native的时候，是不会继承全局的！
但是如果，子页面green为Native，子页面red为None，那么：green页面的颜色为red！（不继承全局样式即style.scss，但是red页面的样式提升为全局，又可以继承encapsulation为Nonde的样式）
假如所有子页面都是None，那么颜色提升为全局样式，可以继承的！