点击插槽文本无法拖拽自定义Web组件（Vanilla JS）

问题核心是：插槽内容属于light DOM，默认不会触发阴影DOM中draggable="true"元素的拖拽事件，点击插槽文本时，鼠标事件被插槽内容捕获，无法传递到下方的拖拽容器。

这里提供两种解决思路，根据你的需求选择：

方法一：CSS穿透（适合插槽内容无交互场景） #

如果插槽里只是纯文本或不需要交互的元素，直接用CSS让插槽内容不接收鼠标事件，点击会穿透到下方的拖拽容器：

修改组件的样式部分，添加::slotted选择器：

const DragItemTemplate = document.createElement("template");
DragItemTemplate.innerHTML =
  `<style>` +
    `div{` +
      `background: gray;` +
      `width: 200px;` +
      `height: 50px;` +
      `padding: 5px;` +
      `margin: 5px;` +
      `cursor: move;` +
      `display: flex;` +
      `align-items: center;` +
      `justify-content: center;` +
    `}` +
    `/* 让插槽内容不接收鼠标事件，点击穿透到拖拽容器 */` +
    `::slotted(*) {` +
      `pointer-events: none;` +
      `user-select: none; /* 可选，避免拖拽时选中文本 */` +
    `}` +
  `</style>` +
  `<div draggable="true">` +
    `<slot></slot>` +
  `</div>`;

class DragItem extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: "open"});
    this.shadowRoot.appendChild(DragItemTemplate.content.cloneNode(true));
  }
}

window.customElements.define("drag-item", DragItem);

这种方法最简洁，修改后点击插槽文本会直接触发下方div的拖拽。

方法二：事件代理（适合插槽内容需要交互场景） #

如果插槽内容有按钮、链接等需要交互的元素，不能用pointer-events: none，可以通过事件代理手动触发拖拽：

const DragItemTemplate = document.createElement("template");
DragItemTemplate.innerHTML =
  `<style>` +
    `div{` +
      `background: gray;` +
      `width: 200px;` +
      `height: 50px;` +
      `padding: 5px;` +
      `margin: 5px;` +
      `cursor: move;` +
      `display: flex;` +
      `align-items: center;` +
      `justify-content: center;` +
    `}` +
  `</style>` +
  `<div draggable="true">` +
    `<slot></slot>` +
  `</div>`;

class DragItem extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: "open"});
    this.shadowRoot.appendChild(DragItemTemplate.content.cloneNode(true));
    this.dragContainer = this.shadowRoot.querySelector('div');
  }

  connectedCallback() {
    // 监听宿主的mousedown事件
    this.addEventListener('mousedown', (e) => {
      // 判断点击目标是否是插槽内的元素
      if (e.target.assignedSlot) {
        e.preventDefault();
        // 手动触发拖拽容器的dragstart事件
        const dragStartEvent = new Event('dragstart', { bubbles: true, cancelable: true });
        this.dragContainer.dispatchEvent(dragStartEvent);
      }
    });

    // 可选：添加dragstart事件处理逻辑
    this.dragContainer.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text/plain', 'drag-item'); // 设置拖拽数据
    });
  }
}

window.customElements.define("drag-item", DragItem);

这种方法会保留插槽内容的交互能力，同时在点击插槽文本时触发拖拽。

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