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

Question

请简单解释一下:host /deep/是什么意思：

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

Answer 1

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

可在此处找到更多相关信息：

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

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

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

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

Use the :host pseudo-class selector to target styles in the element that hosts the component (as opposed to targeting elements inside the component's template).

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

的元素

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

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

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

What does :host /deep/ selector mean?

css

shadow-dom

angular