自定义HTMLElement click事件不冒泡导致Bootstrap4模态框无法触发

问题背景 #

使用Custom Elements开发多状态按钮组件，预期点击按钮时同时实现两个效果：

• 切换组件自身的三阶段显示状态
• 触发Bootstrap4的confirm模态框
  初始实现代码如下：

customElements.define('state-button',
                    class extends HTMLElement {
                        constructor(...args) {
                            super(...args);
                            this.state = 0;                      
                            let o=this;                            
                            this.t = {
                                0:"<button class='btn btn-info'>"+(o.innerHTML)+"</button>",
                                1:"<button class='btn btn-warning'>Are you sure???</button>",
                                2:"<button class='btn btn-danger'>Last chance....</button>"
                            };
                            this.addEventListener("click", this.handleClick,{capture:false});
                        }
                        connectedCallback() {
                            this.setAttribute("data-toggle", "modal");
                            this.setAttribute("data-target", "#confirmModal");
                            this.setAttribute("data-jc_id", this.getAttribute("data-id"));
                            this.render();
                        }
                        render() {
                            console.debug("state", this.state);
                            this.innerHTML=this.t[this.state];
                        }
                        handleClick(event) {                            
                            this.state = (this.state+1) % 3;
                            this.render();                            
                        }
                        setState(state) {
                            this.state = state;
                            this.render();
                        }
                    }
                );

实际运行时模态框始终无法触发，已尝试的排查操作：

• 在handleClick中添加super.click()，会导致组件状态重复切换两次，事件被重复触发
• 移除自定义绑定的点击事件监听后，Bootstrap4模态框可以正常触发
• 在handleClick末尾添加return true，问题无改善

问题成因 #

核心冲突来自DOM更新时机与Bootstrap4模态框触发机制的不兼容：

1. Bootstrap4的模态框触发依赖document层级的事件委托：它在document节点绑定点击监听，触发时会从事件的原始目标（event.target）开始向上调用closest()查找最近的带data-toggle="modal"属性的元素，读取配置后唤起模态框。
2. 原有代码在点击事件冒泡到自定义元素节点时，就同步执行render()重写组件内部的innerHTML，此时事件还未冒泡到document层，但被点击的原始按钮节点已经被从DOM树中移除，节点的父级引用被清空，DOM链断裂。后续Bootstrap的监听逻辑执行时，event.target.closest()无法向上查找到外层带modal触发属性的自定义元素，匹配不到触发源，自然不会弹出模态框。
3. 其他尝试无效的原因：
   • super.click()会手动在自定义元素上再派发一次原生点击事件，导致handleClick被二次执行，因此状态会重复切换
   • return true是DOM0级onclick绑定的事件传播控制规则，对addEventListener绑定的DOM2级事件没有任何作用，无法影响事件冒泡流程

修复方案 #

修复核心是避免在点击事件的同步冒泡流程中破坏DOM树，同时保证Bootstrap能正确识别触发元素，调整后的实现代码如下：

customElements.define('state-button',
  class extends HTMLElement {
    constructor() {
      super();
      this.state = 0;
      // 预定义按钮模板，将modal所需属性直接绑定到实际渲染的button上
      this.templates = {
        0: (text) => `<button class='btn btn-info' data-toggle="modal" data-target="#confirmModal">${text}</button>`,
        1: `<button class='btn btn-warning' data-toggle="modal" data-target="#confirmModal">Are you sure???</button>`,
        2: `<button class='btn btn-danger' data-toggle="modal" data-target="#confirmModal">Last chance....</button>`
      };
      // 提前保存初始按钮文本，避免第一次渲染丢失原始内容
      this.originalText = this.innerHTML.trim();
      // 绑定事件处理函数的this指向，避免this丢失
      this.handleClick = this.handleClick.bind(this);
    }
    connectedCallback() {
      // 同步自定义属性，modal相关属性直接放到内部button上，无需在外层设置
      this.dataset.jcId = this.getAttribute('data-id');
      this.render();
      this.addEventListener('click', this.handleClick);
    }
    render() {
      console.debug("current state", this.state);
      this.innerHTML = this.state === 0 ? this.templates[0](this.originalText) : this.templates[this.state];
    }
    handleClick(event) {
      // 仅响应内部按钮的点击
      if (!event.target.matches('button')) return;
      this.state = (this.state + 1) % 3;
      // 将DOM重绘逻辑放到下一个宏任务执行，等当前点击事件完成冒泡、Bootstrap处理完模态框触发逻辑后再更新DOM
      setTimeout(() => this.render(), 0);
    }
    setState(state) {
      this.state = state;
      this.render();
    }
  }
);

关键修复点：

• 将data-toggle="modal"、data-target属性直接放到实际渲染的button元素上，减少DOM链查找的层级，避免自定义元素标签识别问题
• 把状态更新后的DOM重绘逻辑放到setTimeout(fn, 0)中执行，不打断当前事件的冒泡流程，保证Bootstrap的监听逻辑能正常拿到触发元素
• 提前绑定事件处理函数的this指向，避免类方法this丢失问题
• 提前保存初始按钮文本，解决第一次渲染时原始内容丢失的问题

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