:host /deep/ 选择器是什么意思？答案

【问题标题】：What does :host /deep/ selector mean?:host /deep/ 选择器是什么意思？
【发布时间】：2018-04-05 11:31:59
【问题描述】：

请直截了当地解释:host /deep/ 的含义：

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

【问题讨论】：

【解决方案1】：

用于在使用emulated视图封装时允许对子组件进行样式化。

顺便说一句，/deep/ 选择器现已弃用：

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

:host 用于寻址宿主元素 - 即用于在某处添加组件的元素（例如 <app-component>）。

使用 :host 伪类选择器来定位组件所在元素中的样式（而不是定位组件模板内的元素）。

所以选择器:host /deep/ .ui-autocomplete 的意思是“在当前托管元素上，深入（也在子组件中搜索）并查找类ui-autocomplete 的元素。

以下是关于视图封装功能的一些附加信息：

【讨论】：