css - :host/deep/selector mean? 是什么

标签 css angular shadow-dom

请用简单明了的方式解释:host/deep/的含义:

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

最佳答案

它用于允许在使用 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表示“在当前托管元素上,深入(也在子组件中搜索)并查找类为 ui-autocomplete 的元素。

这里是一些关于 View 封装特性的附加信息:

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

关于css - :host/deep/selector mean? 是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46914414/

相关文章:

html - 居中对齐不一致

html - 如何使用 angular 5+ 的无限滚动?

css - Angular:子 ngTemplateOutlet 中的自定义 CSS

css - 没有 shadow dom 样式封装的 polymer 元素

javascript - 影子 DOM 不显示内容。如何使内容在 DOM 中可见?

css - Chrome 37 计算四舍五入

css - 修改 CSS 以获得更好看的加载微调器

html - <li> 中哪些子元素有效?

javascript - auth0始终在浏览器刷新时显示登录对话框

javascript - 为什么图像在 2 Angular 渲染效果很差