<dialog> 不支持嵌套，因浏览器任意时刻仅允许一个元素处于顶层，第二个 showModal() 会失败；实现多层效果需用单 dialog 动态切换内容或手写 fixed 弹层并手动管理焦点、遮罩等。
<dialog> 不支持嵌套 —— 你不能把一个 <dialog> 放在另一个已打开的 <dialog> 内部，浏览器会忽略第二层的 showModal() 调用，或直接报错（如 Chrome 抛出 DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element is already in a top layer.）。
为什么 dialog 无法嵌套
HTML 规范明确限制：任意时刻最多只有一个元素处于“顶层”（top layer），而 showModal() 的作用就是把该 <dialog> 推入顶层并锁定交互。第二个 showModal() 尝试会失败，因为顶层已被占用。
- 不是 CSS 层级问题（
z-index无效），是浏览器渲染层的硬性约束 -
show()也不行——它不进顶层，但依然无法实现“模态中再模态”的交互阻断 - 即使 DOM 结构上嵌套了（比如
<dialog><dialog></dialog></dialog>），内层<dialog>也不会响应showModal()
想实现多层弹窗效果，得换思路
所谓“多层弹窗”，实际要的是视觉分层 + 逻辑可退栈，而非 DOM 嵌套。可行路径只有两种：
-
用单个
<dialog>+ 动态内容切换：通过 JS 替换<dialog>内部 HTML，配合前进/后退按钮控制状态，避免打开新弹窗 -
降级为
position: fixed手写弹层：放弃原生<dialog>，改用<div class="modal">实现多层堆叠，手动管理z-index、焦点、Esc 键和遮罩点击
后者更灵活，但必须自己补全：焦点环控制、aria-modal 切换、关闭时恢复上一层焦点、防止背景滚动等。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
Safari 下连单层 dialog 都可能崩，别碰嵌套
Safari 17.6 仍存在严重渲染缺陷：一旦父容器有 transform 或 will-change，<dialog> 可能错位、消失或焦点失效。此时若强行叠加多个手写弹层，极易触发渲染层 bug，导致白屏或卡死。
- 不要给外层容器加
transform: translateZ(0)之类“优化” - 避免在
<dialog>外套overflow: hidden容器 - 若必须多层，优先检测
'dialog' in document.createElement('html')，不支持就全量 fallback 到 div 方案
真要“伪嵌套”，只有一种安全做法
关闭当前 <dialog>，立刻用 setTimeout(() => { nextDialog.showModal() }, 0) 打开下一个——利用事件循环间隙让浏览器清空顶层状态。但这只是视觉衔接，不是同时存在两层模态。
- 必须监听
close事件，而不是靠click或keydown模拟关闭 - 关闭前需手动
dialog.returnValue = 'next'记录意图（注意 Safari 不支持该属性） - 用户按 Esc 或点遮罩关闭时，也要统一走
close事件分支，否则流程断裂
真正的嵌套需求，往往暴露的是状态管理混乱。先理清业务是否真的需要“同时保留两层未提交表单”，还是只是导航流程没拆解清楚。
