浏览器规范强制限制任意时刻仅一个 <dialog> 可处于模态状态，多次调用 showModal() 会因“已位于顶层”而报错；必须复用单个 <dialog> 动态更新内容，并严格管理焦点、open 属性及 Safari 兼容性。
多个 <dialog> 元素不能同时处于模态状态，浏览器只允许一个 showModal() 实例在顶层；所谓“切换”，本质是复用单个 <dialog> 并动态更新内容，而非打开多个独立弹窗。
为什么不能直接用多个 <dialog> 并列调用 showModal()
连续对不同 <dialog> 调用 showModal() 会失败，错误信息明确为：DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element is already in a top layer. 这不是 bug，而是浏览器规范强制限制——任意时刻仅一个元素可进入 top layer。即使 DOM 结构上写了多个 <dialog>，第二个调用直接被拒绝，不会降级或排队。
- 不是 z-index 或 CSS 层级问题：
<dialog>的::backdrop没有真实 DOM 节点，无法用样式绕过 -
show()不可行：它不进 top layer，背景仍可交互，失去“模态中再模态”的阻断语义 - 嵌套写法（如
<dialog><dialog></dialog></dialog>）完全无效：内层<dialog>不响应任何方法
用单个 <dialog> 实现内容切换的最小可行方案
复用同一个 <dialog> 元素，通过 JS 替换其 innerHTML，并维护一个简单状态栈。这是语义清晰、兼容性好、且无需 polyfill 的首选路径。
- 初始 HTML 中只保留一个
<dialog id="main-dialog"></dialog>，所有弹窗内容都往里塞 - 每次触发新弹窗前，先保存当前内容（如
stack.push(dialog.innerHTML)），再注入新 HTML - 关闭时调用
dialog.close()，返回上一层则从栈pop()并还原 HTML - 每次内容替换后，必须手动聚焦：
dialog.querySelector('[autofocus]')?.focus()，否则键盘用户无法操作 - 关闭整个弹窗链时，要恢复原始焦点（比如存下
document.activeElement，再.focus()回去）
点击遮罩关闭的兼容写法（尤其 Safari）
原生 <dialog> 的 backdrop 点击不自动关闭，且 Safari 不支持 e.target === dialog 判断是否点在 backdrop 上——这个判断在 Chrome/Edge 120+ 可用，但在 Safari 15.4–17.6 始终失效。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
dialog::backdrop伪元素做事件绑定：它不可编程，也不能读状态 - Chrome/Edge：可用
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari 降级方案：监听 click 后用坐标判断，例如
const rect = dialog.getBoundingClientRect(); if (e.clientX rect.right || e.clientY rect.bottom) dialog.close(); - 如果用了
show()（非模态），压根没有 backdrop，此逻辑无意义
容易被忽略的三个细节
真正让切换体验“可用”的不是内容替换，而是这三点：焦点管理、open 属性生命周期、以及 Safari 渲染陷阱。
-
showModal()会自动添加open属性，但如果你在 JS 中误写dialog.removeAttribute('open')，弹窗就视觉消失（DOM 还在，只是被浏览器判定为未激活） - 父容器若有
transform或will-change，Safari 下<dialog>可能错位、裁剪甚至不可见 - 表单提交用
method="dialog"时，dialog.returnValue在 Safari 中始终为空字符串，不能用于跨弹窗传值
