【问题标题】:Understanding the basics of :host-context了解 :host-context 的基础知识
【发布时间】:2021-04-07 18:52:24
【问题描述】:

我真的迷失了:host-context。 :(

我看了一些视频,阅读了 MDN 页面并尝试在 VSCode 中玩耍以了解。

从我的尝试中我所理解的(可能是错误的)是,使用 :host-context 我可以访问 Shadow DOM 和常规、轻量级 DOM 之间的“DOM 层”并为其设置样式。

有人可以像我 5 岁一样向我解释 :host-context 吗?

【问题讨论】:

  • 仅供参考,AFAIK Mozilla 和 Apple 将不会实施host-context,因此它是一个仅限 Chromium 的聚会。搜索 :slotted 获取有关设置阴影和光 DOM 样式的帖子
  • @Danny'365CSI'Engelman 是的,我喜欢 Web 组件和影子 DOM 的 idea,但我不会在生产中使用它们,而且我已经远离也将它们用于我的个人项目。摩擦力太大。
  • 是的,Google 长期以来一直试图通过 V0 版本将他们的想法强加给全世界。但自 2018 年以来,有了 V1 Web Components,Apple、Mozilla、Google 和 Microsoft 之间有了更好的合作。 V1 是可靠的,唉,那里的许多博客仍然列出 V0 的想法......它们应该被烧掉。那你就永远找不到host-context

标签: javascript css web-component shadow-dom


【解决方案1】:

我的理解是:host-context:host 类似,只是您可以将选择器传递给它,并且它只有在影子主机与轻DOM 中的选择器匹配时才会匹配。因此,假设您有一个自定义元素 my-element。您想要设置此 div 背景颜色的样式:红色,但 如果 my-element 在 H1 中,因为它不应该出现在 H1 中,红色是开发人员的明确标志他们犯了一个错误。

你可以这样做:

:host-context(h1) { background-color: red }

如果我的元素是 h1 的后代,红色背景将仅显示

<h1>
  <my-element></my-element> <!-- red! warning! -->
</h1>
<div>
  <my-element></my-element> <!-- no red, a-ok -->
</div>

【讨论】: