CSS 选择器`:host > some_child_element` 不生效？答案

【问题标题】：CSS selector `:host > some_child_element` doesn't take effect?CSS 选择器`:host > some_child_element` 不生效？
【发布时间】：2021-11-08 12:31:36
【问题描述】：

我有这个自定义元素：

<my-custom-form>
  #shadow-root
   <style>
     :host label {
        color: red;
     }
   </style>
   <div id="wrapper">
     <slot name="form-label"></slot>
     ...
   </div>
</my-custom-form>

现在我使用如下：

<my-custom-form>
    <label slot="form-label">Some Label</label>
</my-custom-form>

我希望label 应该设置为红色。但事实并非如此。 <label> 元素不是作为 :host 的直接子元素存在于 light DOM 中吗？

【问题讨论】：

标签： css web-component shadow-dom

【解决方案1】：

插入的内容在 shadowDOM 中反映，不会成为 shadowDOM 的一部分。

所以样式是在 lightDOM 中完成的（使用全局 CSS）

:host() 仅在 lightDOM 中设置外部“皮肤”的样式

长详解：::slotted CSS selector for nested children in shadowDOM slot

【讨论】：

【解决方案2】：

我相信您遇到的问题是语法问题，请尝试：

:host( [label] ){ }

这是关于 SO 的另一个答案，可以清除您的疑虑！

Applying more in depth selection to the :host CSS pseudo class

文档参考：

https://developer.mozilla.org/en-US/docs/Web/CSS/:host()

【讨论】：

我相信一定有错字。 :host( [label]) {} 选择具有label 属性的宿主元素？