ViewEncapsulation 详解
- Emulated： 默认值,样式只对当前组件生效
- Native(ShadowDom)：使用原生的Shadow Dom
- None: 全局
ViewEncapsulation.Emulated
代码：
@Component({
selector: 'app-home',
template: '<p class="home-test">home works!</p>',
styles:[`
.home-test{
color:red;
}
`],
encapsulation: ViewEncapsulation.Emulated,
})
效果:
image.png
ViewEncapsulation.None
代码：
@Component({
selector: 'app-home',
template: '<p class="home-test">home works!</p>',
styles:[`
.home-test{
color:red;
}
`],
encapsulation: ViewEncapsulation.None,
})
效果:
image.png
ViewEncapsulation.ShadowDom (Native)
代码：
@Component({
selector: 'app-home',
template: '<p class="home-test">home works!</p>',
styles:[`
.home-test{
color:red;
}
`],
encapsulation: ViewEncapsulation.ShadowDom,
})
效果:
image.png
