为Web Components不同Slot内容添加不同事件监听器

基于Vanilla JS编写的通用抽屉模态Web Component，现需解决以下需求：

1. 如何根据插槽（Slot）内的不同内容绑定对应的事件监听器？比如插槽嵌入登录表单时绑定submit事件，嵌入重置密码表单时绑定不同的submit事件；嵌入按钮时绑定click事件。
2. 若插槽内容为表单且已绑定submit事件监听器，能否在组件的disconnectedCallback中移除该监听器？能否在connectedCallback中添加事件监听器，在disconnectedCallback中移除？

一、核心思路：监听插槽变化+动态绑定/移除事件 #

Web Component的插槽提供了slotchange事件用于监听内容变化，结合assignedElements()方法可以获取插槽内的实际DOM元素。我们可以基于元素类型或特征绑定对应事件，同时用容器存储事件处理器，确保后续能准确移除。

修改后的DrawerModal组件代码 #

const button = document.querySelector('.modal-btn')

button.addEventListener('click', () => {
  const modal = document.createElement('drawer-modal')
  document.querySelector('#app').appendChild(modal)
})

const template = document.createElement('template')
template.innerHTML = `
  <style>
    .modal {
      z-index: 9;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }

    .modal-mask {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 9;
      transition: opacity 0.4s ease-in-out;
      background-color: rgba(0 0 0 / 50%);
      opacity: 0;
    }

    .modal-wrapper {
      display: flex;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 10;
      flex-direction: column;
      justify-content: flex-end;
      transition: transform 0.4s ease-in-out;
      transform: translateY(100%);
    }

    .modal-inner {
      position: static;
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      background: #fff;
      padding: 24px;
    }
  </style>

  <div class="modal">
    <div class="modal-mask"></div>
    <div class="modal-wrapper">
      <div class="modal-inner">
        <slot name="content"></slot>
        <p>点击遮罩关闭模态框</p>
      </div>  
    </div>  
  </div>
`

class DrawerModal extends HTMLElement {
  constructor() {
    super()

    this.attachShadow({ mode: 'open' })
    this.shadowRoot.appendChild(template.content.cloneNode(true))

    this.wrapper = this.shadowRoot.querySelector('.modal-wrapper')
    this.mask = this.shadowRoot.querySelector('.modal-mask')
    this.contentSlot = this.shadowRoot.querySelector('slot[name="content"]')
    // 存储插槽元素与对应事件处理器的映射，用于后续移除
    this.slotEventMap = new Map()

    this.wrapper.addEventListener('click', this.closeModal)
    this.shadowRoot.querySelector('.modal-inner').addEventListener('click', this.stopPropagation)
  }

  connectedCallback() {
    setTimeout(() => {
      this.wrapper.style.transform = 'translateY(0%)'
      this.mask.style.opacity = '1'
    })
    // 监听插槽内容变化
    this.contentSlot.addEventListener('slotchange', this.handleSlotChange)
    // 初始化时处理已存在的插槽内容
    this.handleSlotChange()
  }

  disconnectedCallback() {
    this.wrapper.removeEventListener('click', this.closeModal)
    this.shadowRoot.querySelector('.modal-inner').removeEventListener('click', this.stopPropagation)
    this.contentSlot.removeEventListener('slotchange', this.handleSlotChange)
    // 移除所有插槽元素绑定的事件
    this.slotEventMap.forEach((handler, element) => {
      if (element.tagName === 'FORM') {
        element.removeEventListener('submit', handler)
      } else if (element.tagName === 'BUTTON') {
        element.removeEventListener('click', handler)
      }
    })
    this.slotEventMap.clear()
  }

  // 处理插槽内容变化，动态绑定/解绑事件
  handleSlotChange = () => {
    // 先移除之前绑定的事件
    this.slotEventMap.forEach((handler, element) => {
      if (element.tagName === 'FORM') {
        element.removeEventListener('submit', handler)
      } else if (element.tagName === 'BUTTON') {
        element.removeEventListener('click', handler)
      }
    })
    this.slotEventMap.clear()

    // 获取插槽内的实际元素
    const slotElements = this.contentSlot.assignedElements({ flatten: true })
    slotElements.forEach(element => {
      // 根据元素类型绑定对应事件
      if (element.tagName === 'FORM') {
        const submitHandler = this.handleFormSubmit.bind(this, element)
        element.addEventListener('submit', submitHandler)
        this.slotEventMap.set(element, submitHandler)
      } else if (element.tagName === 'BUTTON') {
        const clickHandler = this.handleButtonClick.bind(this, element)
        element.addEventListener('click', clickHandler)
        this.slotEventMap.set(element, clickHandler)
      }
      // 可扩展其他元素类型的事件绑定逻辑
    })
  }

  // 表单提交处理：通过表单标识区分不同业务逻辑
  handleFormSubmit = (form, e) => {
    e.preventDefault()
    const formData = new FormData(form)
    if (form.id === 'login-form') {
      console.log('登录表单提交:', Object.fromEntries(formData))
      // 执行登录逻辑
    } else if (form.id === 'reset-form') {
      console.log('重置密码表单提交:', Object.fromEntries(formData))
      // 执行重置密码逻辑
    }
    // 提交后关闭模态框
    this.closeModal()
  }

  // 按钮点击处理
  handleButtonClick = (button, e) => {
    console.log('按钮被点击:', button.textContent)
    // 执行按钮对应的业务逻辑
  }

  closeModal = e => {
    this.wrapper.style.transform = 'translateY(100%)'
    this.mask.style.opacity = '0'
    setTimeout(() => {
      this.remove()
    }, 400)
  }

  stopPropagation = e => {
    e.stopPropagation()
  }
}
window.customElements.define('drawer-modal', DrawerModal)

二、针对示例的使用方式 #

示例1：插入登录表单 #

给表单添加唯一标识（如id），用于区分不同表单的业务逻辑：

button.addEventListener('click', () => {
  const modal = document.createElement('drawer-modal')
  modal.innerHTML = `
    <form slot="content" id="login-form">
      <label for="email">邮箱</label>
      <input type="email" id="email" name="email" required>
      <label for="password">密码</label>
      <input type="password" id="password" name="password" required>
      <button type="submit">登录</button>
    </form>
  `
  document.querySelector('#app').appendChild(modal)
})

示例2：插入按钮 #

button.addEventListener('click', () => {
  const modal = document.createElement('drawer-modal')
  modal.innerHTML = `
    <button slot="content" class="btn">点击我</button>
  `
  document.querySelector('#app').appendChild(modal)
})

三、关键说明 #

1. 事件内存泄漏预防：通过slotEventMap存储每个插槽元素对应的事件处理器，在组件销毁或插槽内容变化时，能准确移除之前绑定的事件，避免内存泄漏。
2. 动态适配插槽内容：利用slotchange事件，无论是组件初始化时的插槽内容，还是后续动态修改的内容，都能自动触发事件绑定逻辑。
3. 业务逻辑区分：通过元素的id、class等特征，可以为不同类型的插槽内容（如登录/重置密码表单）绑定不同的处理逻辑，保持组件的通用性。

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