什么:主机/深度/选择器是什么意思？

Question

请以直截了当的方式解释:host /deep/:

:host /deep/ .ui-autocomplete {
  width: 85%;
}

Answer 1

它用于在使用emulated视图封装时允许样式化子组件.

有关这方面的更多信息,请访问:

https://angular.io/guide/component-styles

Btw /deep/选择器现已弃用:

不推荐使用阴影穿透后代组合器,并且正在从主要浏览器和工具中删除支持.因此,我们计划放弃Angular中的支持(对于/ deep /,>>>和:: ng-deep的所有3个).在此之前:: ng-deep应该是首选,以便与工具更广泛地兼容.

:host用于解决托管元素 - 即用于在某处添加组件的托管元素(例如<app-component>).

使用:host伪类选择器来定位承载组件的元素中的样式(而不是在组件模板中定位元素).

所以选择器:host /deep/ .ui-autocomplete意味着"在当前托管元素上,深入(也在子组件中搜索)并查找具有类的元素ui-autocomplete.

以下是有关视图封装功能的一些其他信息:

https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html