dialog不支持多重遮罩与嵌套，showModal()会隐式关闭前一个模态层；实现多层交互需降级为div+手动焦点管理，单层视觉分层可用CSS z-index解决。
dialog 标签本身不支持多重遮罩——浏览器只允许一个 showModal() 激活的原生模态层，后续调用会隐式关闭前一个，无法堆叠。所谓“多层弹窗”，必须放弃 DOM 嵌套 dialog 的幻想，改用状态切换或降级方案。
为什么不能在dialog里再放dialog
嵌套 <dialog> 元素在 HTML 结构上合法，但行为完全不可控：内层 dialog.showModal() 会强制关闭外层，且 ::backdrop 只对最顶层生效；DevTools 中永远只看到一个 backdrop 匿名节点。这不是 bug，是规范限定——showModal() 是全局模态入口，不是局部渲染指令。
showModal() 调用会自动关闭前一个已打开的dialog
这是最容易被忽略的隐式行为。即使你手动保留多个 dialog 元素并分别调用 showModal()，浏览器也会按“最后激活者胜出”原则清理之前的模态栈。没有 API 能查询当前有多少个 active dialog，也没有 stack 或 push 方法。
- 想实现“从列表页点进详情页，再点进编辑页”的链路？别开新
dialog，而是复用同一个<dialog id="main-dialog">，用 JS 替换其innerHTML或切换data-state属性 - 需要视觉分层（比如弹窗上再浮一层确认框）？必须降级：
<div class="modal">+inert+ 手动管理tabindex和焦点锁 - 若强行嵌套并监听
close事件试图恢复上一层，会因焦点丢失、滚动位置错乱、ESC 行为冲突而失败
兼容旧版 Safari 的 fallback 必须手写遮罩层
检测是否能用原生 dialog 的唯一可靠方式是：'showModal' in HTMLDialogElement.prototype。Safari ≤15.3、部分安卓 WebView、所有 IE 都返回 false。此时必须用 <div class="overlay"> + <div class="modal"> 实现，并注意：
- 遮罩层和弹窗容器都得挂到
document.body下，避免父级transform或opacity < 1创建隐式层叠上下文导致 z-index 失效 - 遮罩尺寸写死为
top: 0; left: 0; width: 100%; height: 100%，别用100vh（iOS Safari 滚动时地址栏收放会引发高度跳变） - 点击遮罩关闭弹窗时，必须严格判断
e.target === overlayEl，否则内部按钮、链接点击也会触发关闭 - 移动端用
pointerdown替代click，规避 iOS Safari 的 300ms 延迟误判
真正需要多层时，该放弃dialog还是坚持用它？
取决于你的“多层”定义：
立即学习“前端免费学习笔记（深入）”；
- 如果只是视觉上有前后层次（比如主弹窗 + 浮层提示），用单个
dialog+ CSSz-index控制内部元素即可，无需多层 backdrop - 如果逻辑上必须同时存在两个独立可交互模态体（如 A 弹窗未关闭时唤起 B，且 B 关闭后 A 仍保持原状态），
dialog天然不支持，必须降级 - 降级方案里最易踩坑的是焦点管理：B 关闭后，焦点必须准确回到 A 内部上一个活跃元素，而不是页面顶部或随机 input —— 这需要手动记录
document.activeElement并在restore时.focus()
复杂点不在样式，而在状态同步和焦点链。原生 dialog 省掉的代码，最终都会以更隐蔽的方式在降级路径里冒出来。
