能否在:host()选择器中使用:has？如何根据插槽元素样式化自定义元素宿主？

为什么原写法不生效 #

1. :host()的参数限制：:host()的括号内只能接受简单选择器（如类、属性、:hover这类伪类），:has()属于复合选择器，无法直接嵌套在:host()中使用。
2. 插槽内容的DOM范围问题：::slotted()仅能用于设置插槽元素的样式，而:has()在Shadow DOM中只能检测Shadow内部的后代元素。插槽内容属于Light DOM（宿主元素的直接子节点），不在Shadow DOM的树结构内，因此无法通过:has(::slotted(...))检测到。

可行实现方案 #

通过JavaScript监听插槽内容变化，动态给宿主元素添加/移除类，再配合Shadow DOM内的样式规则实现需求：

修改后的JavaScript代码 #

class Component extends HTMLElement {
  constructor() {
    super().attachShadow({ mode: 'open' });
    const template = document.getElementById("TEMPLATE");
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    this.slot = this.shadowRoot.querySelector('slot');
    // 监听插槽内容变化
    this.slot.addEventListener('slotchange', this.handleSlotChange.bind(this));
    // 初始化时检查一次
    this.handleSlotChange();
  }

  handleSlotChange() {
    // 获取插槽中所有实际分配的元素（flatten: true会包含嵌套插槽的元素）
    const assignedElements = this.slot.assignedElements({ flatten: true });
    // 判断是否存在带empty属性的元素
    const hasEmptyElement = assignedElements.some(el => el.hasAttribute('empty'));
    // 给宿主切换类名
    this.classList.toggle('has-empty-slot', hasEmptyElement);
  }
}
window.customElements.define('wc-foo', Component);

修改后的HTML模板 #

<template id="TEMPLATE">
  <style>
      /* 通过类名给宿主设置样式 */
      :host(.has-empty-slot) {
         border: 2px solid lime;
      }
  </style>
  <div>Custom web component should have a lime border</div>
  <slot></slot>
</template>

<wc-foo>
  <div empty>"Empty Div"</div>
</wc-foo>

方案说明 #

• 利用slotchange事件监听插槽内容的添加、移除或替换，确保内容变化时能实时更新宿主样式。
• 通过assignedElements({ flatten: true })获取插槽中的所有元素（包括嵌套插槽里的元素），检查是否存在带empty属性的节点。
• 动态给宿主元素切换has-empty-slot类，Shadow DOM内的:host(.has-empty-slot)选择器即可匹配并设置边框样式。

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