在Angular 2+中，组件样式是受保护的，默认情况下不会泄漏到其他组件。这要归功于使用Shadow DOM或Shadow DOM仿真的视图封装。然而，仍然有一些方法可以让组件的样式与它周围的：host，：host-context和/deep/（现在是：：ng-deep)进行交互。还有一种方法可以更改视图封装的行为：

==同步，由长者更正==

您可以使用Special：host伪类选择器来应用宿主组件模板中的样式，该模板是当前组件的父级：

1:host {
2  background-color: #545454;
3  color: white;
4  font-size: 1.5em;
5}

使用：host(选择器)指定选择器，以应用仅在主体组件中存在的选择器的样式。在此示例中，仅当宿主具有.Dark类时才应用样式：

1:host(.dark) {
2  background-color: #545454;
3  color: white;
4  font-size: 1.5em;
5}

：host-上下文

您可以根据组件树中位于其自身之上的任何组件或html元素的条件，将样式应用到当前组件。一个常见的用例是，例如，如果Body元素上存在某个类，则应用样式。这对于主题设置真的很有用。

在下面的示例中，只有在上游的某个地方找到了深紫色时，才会设置类为.info的SPAN元素的样式：

1:host-context(.deep-purple) span.info {
2  border: 3px solid hotpink;
3  border-radius: 12px;
4}

：：ng-deep

使用：：ng-deep，样式将应用于当前组件，但也会向下应用于组件树中当前组件的子组件。

<$>[注]在角度4.3之前，使用了/Deep/or>，而不是：：ng-Deep。这两种表示法都已被browsers，弃用，因此**：：NG-Deep** 现在是临时解决方法。<$>

在下面的示例中，span.info在当前组件及其子组件中具有BE样式：

1::ng-deep span.info {
2  border: 3px solid hotpink;
3  border-radius: 12px;
4}

所有这些伪类也可以组合在一起以实现最大限度的控制：

1:host-context(.deep-purple) ::ng-deep span.info {
2  border: 3px solid hotpink;
3  border-radius: 12px;
4}

查看封装

在组件的修饰器中，可以将视图封装设置为Native、Emoted(默认)或None，如下所示：

1@Component({
2  selector: 'my-app',
3  ...,
4  encapsulation: ViewEncapsulation.None
5})

• Native使用浏览器的本地Shadow DOM功能。对于本机支持，浏览器支持仍然非常有限。
• 模拟是默认行为，并使用模拟的阴影DOM。现在它是最合适的，因为大多数常用浏览器都不支持Shadow DOM。
• None不会应用任何视图封装，应用于一个组件的样式也会对整个应用程序产生全局影响。