7、Web组件开发：插槽与样式的深度解析

Web组件开发：插槽与样式的深度解析

1. 插槽事件处理与更新

在事件接收方面，可通过 querySelector 和插槽选择器读取插槽，这会返回一个 HTMLSlotElement 实例。它与 HTMLElement 基本相同，唯一的区别在于其具有 assignedNodes 方法，该方法可用于访问投影内容，也就是触发实际事件的元素。对于所有节点，可附加一个事件处理程序来接收自定义事件。

自定义事件的工作方式与标准事件类似，但它提供了一个额外的 detail 字段，其类型可以是任意类型或由泛型指定的类型。要正确触发自定义事件，使用 CustomEventInit 类型是正确的方式。

以下是相关代码示例：

if (slot) {
    slot.assignedNodes()
      .forEach((e: Node) => {
        e.addEventListener('menuclick', (el: Event) =>
          alert((el as CustomEvent).detail));
      });
  }
}
customElements.define('menu-item', MenuItem);
customElements.define('custom-menu', CustomMenu);

在菜单示例