dialog 不能销毁重建，因其模态行为（焦点锁定、::backdrop 渲染、esc 响应）强依赖 dom 位置与生命周期；必须作为 document.body 直系子元素存在，重建易致 safari 遮罩失效、esc 失灵、焦点丢失。

dialog 标签不能“销毁重建”——它不是组件实例，而是 DOM 元素；反复 remove() 再 appendChild() 会丢失焦点管理、backdrop 渲染状态，尤其在 Safari 中直接导致遮罩失效、Esc 失灵。

为什么不能用 remove() + createElement() 重建 dialog

浏览器对 dialog 的模态行为（焦点锁定、::backdrop 渲染、Esc 响应）有强耦合的 DOM 位置与生命周期约束，不是简单“删了再建”就能复原的：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

• dialog 必须是 document.body 的直接子元素，重建后若插入位置不对（比如插进 #app），Safari v17.6+ 会彻底不渲染 ::backdrop
• 重建后的 dialog 没有历史 open 状态，showModal() 调用前需手动 autofocus、补 aria-labelledby、重绑事件，否则键盘用户无法进入
• 旧 dialog 的 close 事件监听器未清理，新实例又绑一次，容易触发多次回调
• Firefox 目前仍不支持 dialog::backdrop 样式，但会执行模态逻辑；重建后若 CSS 未同步重载，遮罩可能变透明或消失

正确做法：复用单个 dialog 元素 + 动态更新内容

把 dialog 当作容器，只换内容，不换节点。这是最稳定、兼容性最高、无障碍友好的方案：

• 在 HTML 底部（

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！