Web Component中:host选择器匹配slot传入元素样式不生效问题

样式不生效的核心原因 #

• Web Component的Shadow DOM存在样式隔离规则：Shadow DOM内部定义的CSS选择器，默认只能匹配Shadow DOM树内部的元素，无法直接选中来自Light DOM的、通过slot插槽传入的元素。
• 你写的:host label选择器，虽然逻辑上<label>确实是<my-custom-form>（也就是:host对应的元素）的Light DOM子元素，但Shadow DOM内的后代选择器默认只会遍历Shadow DOM内部的节点树，不会跨隔离边界查询Light DOM的节点，因此无法匹配到slot传入的label。
• 补充说明：slot插槽仅负责元素的渲染位置分发，不会改变元素的DOM归属——你传入的label始终属于Light DOM，不属于Shadow DOM树的一部分。

解决方法 #

要给slot传入的元素设置Shadow DOM内定义的样式，需要使用专门的::slotted()伪元素，写法如下：

:host ::slotted(label) {
  color: red;
}

::slotted()的作用就是专门匹配被分发到slot中的Light DOM元素，符合你要封装样式的需求。

内容的提问来源于stack exchange，提问作者Jinghui Niu