如何从Slot获取自定义元素<custom-element>？

你可以通过以下两种简洁方式从slot对象获取其父级：

方法一：利用Shadow DOM的host属性（推荐） #

由于slot位于的Shadow Root内，先通过slot.getRootNode()获取该Shadow Root，再通过Shadow Root的host属性直接拿到宿主：

const events = (event) => { 
  const slot = event.target.assignedSlot; // 替换原代码中可能指向错误的this，用event.target获取触发事件的按钮
  const shadowRoot = slot.getRootNode();
  const customElement = shadowRoot.host;
  // customElement即为目标<custom-element>实例
};

方法二：通过DOM节点遍历 #

若不想使用Shadow Root API，可向上遍历DOM节点找到：

const events = (event) => { 
  const slot = event.target.assignedSlot;
  let currentNode = slot;
  // 向上遍历节点，直到找到custom-element标签
  while (currentNode && currentNode.tagName !== 'CUSTOM-ELEMENT') {
    currentNode = currentNode.parentNode;
    // 遍历到Shadow Root时，切换为宿主元素继续查找
    if (currentNode instanceof ShadowRoot) {
      currentNode = currentNode.host;
    }
  }
  const customElement = currentNode;
};

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