第三方弹窗动态渲染时ID冲突的本质是多个逻辑共用同一ID操作DOM，而浏览器只返回首个匹配节点；应弃用全局ID，改用弹窗容器内查询、事件委托或运行时生成唯一ID。
第三方弹窗组件动态渲染时，getElementById 抢占节点冲突的本质，是多个逻辑试图用同一个 ID 操作 DOM，而浏览器只认第一个——这不是竞争，是规范行为。关键不在“抢”，而在“不该用 ID 去管动态内容”。
别让 ID 成为动态弹窗的唯一标识
ID 在 HTML 中必须全局唯一，但第三方弹窗（如 Element Plus 的 el-dialog、Ant Design 的 Modal 或自研弹窗）往往在 body 末尾动态插入 DOM，且可能多次打开/关闭。若你在 JS 中硬写 document.getElementById('confirm-btn') 并反复调用，极易出现：
- 前一次弹窗未销毁，新弹窗又插入同名 ID 元素 →
getElementById总返回旧节点 - 弹窗被 v-if 销毁后重建，ID 虽相同，但原绑定事件已丢失，新节点无监听
- 多个弹窗并存时（如嵌套或快速连续触发），ID 冲突直接导致操作错位
改用上下文感知的查询方式
放弃依赖全局 ID，转向与当前弹窗实例强绑定的查找逻辑：
- 利用弹窗容器元素作为查询根节点：例如拿到弹窗 DOM 节点
dialogEl后，用dialogEl.querySelector('[data-action="confirm"]')替代document.getElementById('confirm-btn') - 在弹窗 open 回调或
mounted/connectedCallback中执行查找和绑定，确保 DOM 已挂载 - 对 Vue/React 组件，优先使用 ref 或
ref+querySelector组合，避免脱离组件上下文
用事件委托替代逐个绑定
当弹窗按钮结构固定（如统一 class="dialog-btn"），更稳妥的方式是委托给弹窗容器或 body：
dialogEl.addEventListener('click', e => { if (e.target.matches('[data-role="submit"]')) { /* 处理 */ } })- 或全局委托：
document.body.addEventListener('click', e => { if (e.target.closest('.my-dialog') && e.target.matches('[data-action="ok"]')) { /* 安全定位 */ } }) - 优势：不依赖 ID 唯一性，不惧动态增删，一次注册长期有效
为动态内容生成唯一 ID（仅必要时）
如果业务强依赖 ID（如对接老系统、无障碍属性或外部 SDK），请由弹窗自身生成带时间戳或随机数的 ID：
- 创建弹窗时：
const id = `modal-${Date.now()}-${Math.random().toString(36).substr(2, 6)}` - 将该 ID 注入弹窗 DOM，并通过返回值、事件 payload 或 ref 暴露给调用方
- 后续所有
getElementById操作都基于这个运行时生成的 ID，而非静态写死
