当封装设置为ViewEncapsulation.None时，组件选择器可以用作CSS选择器来设置主机元素的样式：

/* With ViewEncapsulation.Emulated, use :host selector */
:host {
  color: red;
}

/* With ViewEncapsulation.None, use component selector */
app-child-encapsulation-none {
  color: green;
}

有关演示，请参见this stackblitz。

CSS中的：host选择器用于选择承载应用CSS的组件的元素。如果将组件的ViewEncapsulation属性设置为ViewEncapsulation.None，则会禁用Angular用于将样式范围限定为该组件的机制，这可能会在尝试使用：host选择器时导致问题。
当ViewEncapsulation设置为ViewEncapsulation.None时，Angular不会向组件模板内的元素添加任何特殊属性或类。这意味着应用于：host选择器的任何样式也将应用于页面上与同一选择器匹配的任何其他元素，这可能会导致意外的样式设置。
如果您仍然希望使用：host选择器，可以使用ViewEncapsulation.Emulated而不是ViewEncapsulation.None。这将使Angular能够模拟shadow DOM的行为，并将样式范围限定为组件，但仍然允许您使用：host选择器。
此外，您还可以将元素选择器与添加到主机元素上的属性一起使用。

my-comp-name { 
/* styles go here */ 
}

代替

:host { 
/* styles go here */
}