参考: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,那么颜色提升为全局样式,可以继承的!