:host ,:host() ,:host-context 选择器有啥区别

Posted 2023-03-06

【中文标题】:host ,:host() ,:host-context 选择器有啥区别

【英文标题】：What is the different between :host ,:host() ,:host-context selectors:host ,:host() ,:host-context 选择器有什么区别

【发布时间】：2018-12-21 22:14:15

【问题描述】：

我正在从它的样式文件中设置一个角度组件的样式，我发现我必须使用 :host ,:host() 或 :host-context 选择器，它们各自有什么不同？

【参考方案1】：

根据我的观察:host 为组件应用样式，:host(.class) 如果组件具有指定的类，则为组件应用样式。:host-context(.class) 如果组件的宿主组件具有指定的类，则为组件应用样式并且如果组件具有也计数的类。

简而言之，:host-context 似乎在深入搜索条件。

【参考方案2】：

:主机

是用于设置宿主组件样式的语法。

:host(.element)

是一个实验性的CSS伪类函数，选择the shadow host of the shadow DOM containing the CSS it is used inside(Reference)

:主机上下文

是用于在当前元素之外的任何位置设置特定类样式的语法。该类必须已应用于当前元素范围之外的元素。

有关 Angular 应用程序上下文的更多深入信息，请参阅this blog post。

【讨论】：

如果我错了，请纠正我，但根据我的理解（以及 MDN 上的描述），我看不出 :host 和 :host-context 是如何仅针对 Angular 的。 developer.mozilla.org/en-US/docs/Web/CSS/:host

是的，你是对的，我只在 Angular 上下文中看到过，更正了答案。