在有插槽问题的 Web 组件中使用事件委托（冒泡）答案

【问题标题】：Using event delegation (bubbling) in web component with slot problem在有插槽问题的 Web 组件中使用事件委托（冒泡）
【发布时间】：2022-01-16 19:13:12
【问题描述】：

我创建了这个简单的示例（纯 JS，不在 Vue 或 React 等中）：

<body>
  <script>
    (function () {
      class MyComponent extends HTMLElement {
        constructor() {
          super();
          const shadowRoot = this.attachShadow({ mode: 'open' });
          const template = document.createElement('template');
          template.innerHTML = `
            <div>
              <button>
                <slot> <em>left</em> </slot>
              </button>
            </div>
          `;
          shadowRoot.append(template.content.cloneNode(true))

          shadowRoot.addEventListener('click', (event) => {
            // normal event delegation stuff,
            const button = event.target.closest('button');
            if (!button) return;
            // do somthing with button
            console.log(button);
          });
        }
      }

      customElements.define('my-component', MyComponent);
    }());
  </script>

  <my-component id="myComponent"></my-component>
</body>

目前运行良好。

但是，在添加槽之后：

<my-component id="myComponent"> <span>previous</span> </my-component>

事件委托代码坏了，因为我点击的是Light DOM但Shadow DOM，所以，我用const button = event.target.closest('button');得到了null

有什么建议在槽内使用事件委托？

如果语法有问题，我是中国人:) 感谢您的阅读

【问题讨论】：

请创建一个 MCVE。 stackoverflow.com/help/mcve。另请注意，使用插槽时，插槽内容保留在 light DOM 中；它只是为了渲染目的而反映到shadow DOM。这不会改变它在文档中的位置，因此 light DOM 中的任何事件都不会看到 shadow DOM。
@connexo 谢谢，添加了 MCVE。您的评论帮助我确认了我的想法，我认为我必须以另一种方式实现相同的目标。

标签： web-component shadow-dom event-bubbling slot

【解决方案1】：

event.composedPath() 输出包含 click 事件传递的所有元素。
跨越所有 shadowRoot 边界。

我把你的代码压缩了一个位...

注意：SO sn-p 控制台速度慢且冗长；检查 TOP OF F12 控制台（所以 sn-p 也可以在那里列出沙盒错误）

<script>
  customElements.define('my-component', 
   class extends HTMLElement {
    constructor() {
      super()
       .attachShadow({mode:'open'})
       .innerHTML = `<div>
                       <button><slot>Left</slot></button>
                     </div>`;
      this.shadowRoot.addEventListener('click', (evt) => {
        console.log(evt.composedPath());
      });
    }
  });
</script>

<my-component></my-component>
<my-component>Right</my-component>

【讨论】：

非常感谢，evt.composedPath() 有效。我只需要在composedPath 数组中找到正确的目标。