Angular2 的 View Encapsulation（样式封装）

Angular2 的 View Encapsulation（样式封装）

angular2 版本：2.4.8, 测试代码地址

Shadow Dom

开始之间，建议先了解下Shadow Dom 方面的知识

View Encapsulation 的种类

• ViewEncapsulation.None - 没有Shadow Dom，样式没有封装，全局可以使用。
• ViewEncapsulation.Emulated - angular2的默认值，模仿 Shadow Dom，通过在标签上增加标识，来固定样式的作用域。
• ViewEncapsulation.Native - 使用原生的Shadow Dom。

ViewEncapsulation.None

@Component({
    selector: 'component-one',
    template: `

      

      
      

      
      

      
      

      
      

    `,
    styles:[`
        .green{
          background-color: green;
          width:20px;
          height: 20px;
        }
    `],
    encapsulation:ViewEncapsulation.None
})

生成的标签中的