填写这份《一分钟调查》，帮我们（开发组）做得更好！去填写Home
API 参考手册
API > @angular/core

ViewEncapsulation

定义可用于 Component 的 Component的模板和样式封装选项。

Defines template and style encapsulation options available for Component's Component.

查看"说明"...

      
      enum ViewEncapsulation {
  Emulated: 0
  None: 2
  ShadowDom: 3
}

说明

请参阅 encapsulation。

See encapsulation.

Further information available in the Usage Notes...

成员列表

成员说明
Emulated: 0

通过向宿主元素添加包含替代 ID 的属性并预处理通过 styles 或 styleUrls 提供的样式规则，来模拟 Native 所有选择器。

Emulate Native scoping of styles by adding an attribute containing surrogate id to the Host Element and pre-processing the style rules provided via styles or styleUrls, and adding the new Host Element attribute to all selectors.

这是默认选项。

This is the default option.

None: 2

不要提供任何模板或样式封装。

Don't provide any template or style encapsulation.

ShadowDom: 3

使用 Shadow DOM 封装样式。

Use Shadow DOM to encapsulate styles.

对于 DOM，这意味着使用现代的 Shadow DOM 并为组件的 Host 元素创建 ShadowRoot。

For the DOM this means using modern Shadow DOM and creating a ShadowRoot for Component's Host Element.

使用说明

例子

Example

      
      @Component({
  selector: 'my-app',
  template: `
    <h1>Hello World!</h1>
    <span class="red">Shadow DOM Rocks!</span>
  `,
  styles: [`
    :host {
      display: block;
      border: 1px solid black;
    }
    h1 {
      color: blue;
    }
    .red {
      background-color: red;
    }

  `],
  encapsulation: ViewEncapsulation.ShadowDom
})
class MyApp {
}