如何处理Web Component中Shadow Root内元素的点击事件并返回文本

核心问题分析 #

你的代码逻辑本身没问题，但存在几个细节漏洞导致事件不生效：

1. 逐个绑定事件的方式对动态生成的列表项不友好，且容易出现隐式的上下文问题
2. innerText可能包含<i>标签带来的空白字符，导致取值不准确
3. 从shadowRoot派发事件的方式不符合规范，外部组件难以监听
4. 若searchInput不是从Shadow Root内部获取的引用，会导致无法修改输入框值

改进方案 #

推荐使用事件委托替代逐个元素绑定，同时修正事件派发和取值逻辑，以下是完整的修复代码：

1. 正确绑定事件（事件委托）

// 在你的Web Component类内部，绑定事件到父容器
this.shadowRoot.querySelector('.results').addEventListener('click', (event) => {
  // 找到真正被点击的result-item（兼容点击子元素的情况）
  const targetItem = event.target.closest('.result-item');
  if (!targetItem) return; // 点击的不是目标项，直接返回

  // 准确获取选中的文本（取span标签内容，避免i标签干扰）
  const selectedText = targetItem.querySelector('span').textContent.trim();

  // 确保searchInput是从Shadow Root内部获取的引用
  const searchInput = this.shadowRoot.querySelector('你的输入框选择器');
  searchInput.value = selectedText;

  // 从组件本身派发自定义事件（而非shadowRoot）
  const destinationEvent = new CustomEvent('destination-search', {
    detail: selectedText,
    bubbles: true,
    composed: true
  });
  this.dispatchEvent(destinationEvent);
});

2. 完整的Web Component示例

class DestinationSearch extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    // 组件模板
    this.shadowRoot.innerHTML = `
      <input type="text" class="search-input" placeholder="输入目的地">
      <div class="results">
        <ul></ul>
      </div>
    `;
    this.searchInput = this.shadowRoot.querySelector('.search-input');
    this.bindEvents();
  }

  bindEvents() {
    // 结果列表点击事件委托
    this.shadowRoot.querySelector('.results').addEventListener('click', (event) => {
      const targetItem = event.target.closest('.result-item');
      if (!targetItem) return;

      const selectedText = targetItem.querySelector('span').textContent.trim();
      this.searchInput.value = selectedText;

      // 派发自定义事件
      const destinationEvent = new CustomEvent('destination-search', {
        detail: selectedText,
        bubbles: true,
        composed: true
      });
      this.dispatchEvent(destinationEvent);
    });

    // 输入触发接口请求（示例）
    this.searchInput.addEventListener('input', () => {
      // 模拟接口返回结果并渲染
      this.renderResults(['Amsterdam', 'Lisbon', 'Paris', 'London']);
    });
  }

  // 渲染结果列表
  renderResults(results) {
    const ul = this.shadowRoot.querySelector('.results ul');
    ul.innerHTML = results.map(city => `
      <li class="result-item"><i></i><span>${city}</span></li>
    `).join('');
  }
}

customElements.define('destination-search', DestinationSearch);

关键注意点 #

• 事件委托：绑定到父容器.results，不管列表项是静态还是动态生成，都能触发事件，同时减少事件绑定数量提升性能
• 元素引用：所有Shadow Root内的元素必须通过this.shadowRoot.querySelector()获取，不能用全局document查询
• 事件派发：从自定义元素实例（this）派发事件，而非shadowRoot，确保外部组件能通过addEventListener正常监听
• 文本取值：优先使用span标签的textContent，避免无关标签的文本干扰

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