CSS 是否能在 Angular 中使用 Encapsulation.None 来样式化 :host

在本文中，我们将介绍在 Angular 中使用 Encapsulation.None 来样式化 :host 的可能性。

阅读更多：CSS 教程

什么是 Angular 的组件封装？

在 Angular 中，组件封装是一个重要的概念，它使我们能够在组件中定义的样式仅应用于该组件及其子组件，从而避免样式冲突和相互干扰的问题。默认情况下，Angular 使用 Emulated 封装模式，即 Shadow DOM 技术，它将组件的样式封装在组件的 Shadow DOM 中，以实现样式的隔离。

:host 伪类简介

:host 是 Angular 中用于选择组件自身的伪类选择器。它允许我们样式化组件的根元素。使用 :host 可以很方便地定义和应用仅作用于组件根元素的样式规则。

Encapsulation.None 的作用

在某些情况下，我们可能需要在 Angular 组件中禁用封装，以允许全局样式直接影响组件。Angular 提供了 Encapsulation 类型来控制组件封装行为。其中，Encapsulation.None 表示禁用组件封装，使组件的样式对全局样式具有穿透性。

使用 Encapsulation.None 样式化 :host

当我们将 Encapsulation.None 应用于一个组件时，组件会删除 Shadow DOM，从而允许全局样式直接影响组件。但是默认情况下，:host 仍然处于封装模式，即它仅适用于组件自身。

如果我们希望在 Encapsulation.None 模式下样式化 :host，我们可以借助邻近的选择器（Adjacent Selectors）。具体来说，我们可以在样式表中创建一个针对相邻的选择器，以选择组件根元素并样式化它。下面是一个示例：

:host /deep/ h1 {
  color: red;
}

在上述示例中，我们使用了 /deep/ 这个特殊标记，它的作用是告诉 Angular 忽略封装并允许全局样式影响组件。

需要注意的是，/deep/ 已经过时，推荐使用 ::ng-deep 这个选择器。同样的示例可以改写为：

:host ::ng-deep h1 {
  color: red;
}

示例说明

让我们通过一个示例来进一步理解在 Encapsulation.None 模式下样式化 :host 的方法。

假设我们有一个名为 MyComponent 的组件，并希望样式化它的根元素。首先，我们将组件的样式封装模式设置为 Encapsulation.None：

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})

然后，在 my-component.component.scss 文件中，我们可以使用 ::ng-deep 选择器样式化 :host，并选择根元素的子元素进行样式化，如下所示：

:host ::ng-deep h1 {
  color: red;
}

:host ::ng-deep p {
  font-size: 16px;
  line-height: 1.5;
}

在上述示例中，我们样式化了 MyComponent 的根元素下的 h1 和 p 元素。

注意事项

尽管使用 Encapsulation.None 加上 /deep/ 或 ::ng-deep 可以实现样式化 :host，但是需要谨慎使用。因为禁用封装会带来样式冲突和全局污染的风险。在大型项目中，最好仅在必要的情况下使用 Encapsulation.None，并且在样式化 :host 时避免选择器的滥用。