dialog 不能销毁重建，因其模态行为（焦点锁定、::backdrop 渲染、Esc 响应）强依赖 DOM 位置与生命周期；必须作为 document.body 直系子元素存在，重建易致 Safari 遮罩失效、Esc 失灵、焦点丢失。
dialog 标签不能“销毁重建”——它不是组件实例，而是 DOM 元素；反复 remove() 再 appendChild() 会丢失焦点管理、backdrop 渲染状态，尤其在 Safari 中直接导致遮罩失效、Esc 失灵。
为什么不能用 remove() + createElement() 重建 dialog
浏览器对 dialog 的模态行为（焦点锁定、::backdrop 渲染、Esc 响应）有强耦合的 DOM 位置与生命周期约束，不是简单“删了再建”就能复原的：
-
dialog必须是document.body的直接子元素，重建后若插入位置不对（比如插进#app），Safari v17.6+ 会彻底不渲染::backdrop - 重建后的
dialog没有历史 open 状态，showModal()调用前需手动autofocus、补aria-labelledby、重绑事件，否则键盘用户无法进入 - 旧
dialog的close事件监听器未清理，新实例又绑一次，容易触发多次回调 - Firefox 目前仍不支持
dialog::backdrop样式，但会执行模态逻辑；重建后若 CSS 未同步重载，遮罩可能变透明或消失
正确做法：复用单个 dialog 元素 + 动态更新内容
把 dialog 当作容器，只换内容，不换节点。这是最稳定、兼容性最高、无障碍友好的方案：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 在 HTML 底部（
</body>前）静态声明一个<dialog id="globalDialog"></dialog>，确保它是body的直系子节点 - 用
innerHTML或textContent替换其内部结构，避免直接appendChild导致焦点链断裂 - 每次打开前调用
dialog.close()（即使已关闭）清空上一次状态，再dialog.showModal() - 必须在内容更新后，手动
focus()到第一个可聚焦子元素（如按钮或输入框），否则showModal()可能聚焦失败 - 关闭后，记得恢复
document.body.style.overflow = ''，防止滚动被锁死
需要动态结构时，用 template + cloneNode(true) 但必须挂到 body
如果弹窗内容结构差异大（比如表单 vs 提示 vs 加载中），可用 <template> 预存结构，但克隆后必须严格挂到 document.body，且不能嵌套：
立即学习“前端免费学习笔记（深入）”；
- 从
<template id="form-dialog">克隆：const newContent = document.getElementById('form-dialog').content.cloneNode(true) - 清空旧内容：
dialog.innerHTML = ''，再dialog.appendChild(newContent) - 绝对禁止：
someDiv.appendChild(dialog)—— 这会让dialog离开body直系子树，Safari backdrop 彻底消失 - 每次挂载后，检查
dialog.parentNode === document.body，不成立就document.body.appendChild(dialog) - 不要依赖
open属性控制显隐，始终用showModal()/close()，否则 Safari 会残留 backdrop 并阻塞交互
容易被忽略的关键点
真正让 dialog 在 Safari 和 Firefox 上稳定工作的，不是“怎么建”，而是“怎么管”：
-
dialog.close()后必须等close事件触发再做后续操作，不能靠setTimeout或立即修改 DOM - 所有自定义关闭按钮（包括
<form method="dialog">里的<button type="submit">）都必须确保dialog是通过showModal()打开的，show()不生效 -
dialog::backdrop无法绑定事件，判断点击是否在遮罩上只能用getBoundingClientRect()坐标比对，不能用e.target === dialog - 不要给
dialog设transform、will-change或父级设overflow: hidden，iOS Safari 会裁剪或偏移弹窗
