了解 :host-context 的基础知识

Question

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

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

我从我的尝试中所理解的（也许是错误的）是 :host-context 我可以访问 Shadow DOM 和常规光 [=21] 之间的“DOM 层” =] 并设置样式。

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

Answer 1

我的理解是 :host-context 类似于 :host 除了你可以给它传递一个选择器，而且它 只有当影子主机在 light 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>

了解 :host-context 的基础知识

Understanding the basics of :host-context

javascript

css

web-component

shadow-dom