CSS 选择器 '：host > some_child_element' 不生效？

Question

我有这个自定义元素:

<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>元素驻留在光DOM作为:主机的直接子?

Answer 1

我相信你的语法有问题，试着做:

• :host( [label] ){ }

这是另一个关于SO的答案，它将消除你的疑虑!

• 对:host CSS伪类
应用更深入的选择

文档参考:

• https://developer.mozilla.org/en-US/docs/Web/CSS/主机()

Answer 2

插入的内容反映

样式是在lightDOM (with global CSS)中完成的

:host()只样式化外面的"皮肤";在lightDOM

详细说明::::在shadowDOM槽中嵌套的子CSS选择器