angualr encapsulation详解

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