:host/deep/选择器是什么意思? [英] What does :host /deep/ selector mean?
问题描述
请直接说明:host /deep/
的含义:
:host /deep/ .ui-autocomplete {
width: 85%;
}
推荐答案
它用于在使用emulated
视图封装时允许对子组件进行样式设置.
It is used to allow styling child components when using emulated
view encapsulation.
有关此的更多信息,请参见:
More about this can be found here:
https://angular.io/guide/component-styles
Btw /deep/
选择器现已弃用:
Btw /deep/
selector is now deprecated:
不推荐使用穿刺阴影的后代组合器,并且从主要的浏览器和工具中删除了对它的支持.因此,我们计划放弃对Angular的支持(针对/deep/,>>>和:: ng-deep的全部3种).在此之前,应首选:: ng-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>
).
:host
is used to address the hosting element - that is the one that you use to add the component somewhere (e.g. <app-component>
).
使用:host伪类选择器可以在托管组件的元素中定位样式(与在组件模板内定位元素相对).
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
的意思是在当前宿主元素上,深入了解(也搜索子组件),并查找类为ui-autocomplete
的元素.
So the selector :host /deep/ .ui-autocomplete
means "on current hosting element, go deep (search in child components too) and look for elements with class ui-autocomplete
.
以下是有关视图封装功能的其他信息:
Here is some additional information about the view encapsulation feature:
https://blog. Thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
这篇关于:host/deep/选择器是什么意思?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!