dialog必须是body直接子元素才能激活模态栈，否则backdrop缺失、焦点逃逸、showModal()失败；多层栈需手动维护数组，关闭逻辑须同时监听click与close事件。
dialog 必须是 body 的直接子元素才能激活模态栈
浏览器只在 dialog 是 body 直接子节点时，才为其注入 ::backdrop、捕获焦点、响应 Esc。嵌套在 div、section 或任何带 transform/position: relative 的容器里，都会导致 backdrop 缺失、Tab 键逃逸、showModal() 报错或静默失败。
常见错误结构：
<body>
<div class="app">
<dialog></dialog> <!-- ❌ 不生效 -->
</div>
</body>正确写法（必须）：
<body> <dialog id="confirm-dialog"></dialog> <!-- ✅ --> <div class="app">...</div> </body>
- 不能用 Shadow DOM 包裹
dialog，否则生命周期中断 - 不能给
dialog自身设position: absolute或transform，否则 backdrop 错位 - 若用框架（如 React/Vue），需确保渲染后
dialog被document.body.appendChild()移动过去
多层 dialog 的栈管理靠手动维护数组，而非 DOM 顺序
浏览器不暴露当前最顶层 dialog 的 API，document.querySelector('dialog[open]') 只返回第一个匹配项，无法反映实际 z-order。真实层级由 showModal() 调用顺序决定，但 DOM 中它们仍是平级兄弟节点。
立即学习“前端免费学习笔记（深入）”；
必须自己维护一个栈：
const dialogStack = [];
dialog1.addEventListener('click', () => {
dialog1.showModal();
dialogStack.push(dialog1);
});
dialog1.addEventListener('close', () => {
const idx = dialogStack.indexOf(dialog1);
if (idx > -1) dialogStack.splice(idx, 1);
});
// 最顶层即 dialogStack[dialogStack.length - 1]- 每次
showModal()后立即push()，不要等事件 -
close事件触发时移除，不是click或keydown - 避免用
getComputedStyle(dialog).zIndex判断层级——它始终为空字符串
::backdrop 样式必须显式声明背景色，且不能设 z-index
Chrome/Safari 默认不给 ::backdrop 上色，Firefox 虽有默认灰度但不可控。不设背景会导致遮罩“不可见”，用户误以为没弹出。
正确 CSS：
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5); /* 必须写 */
}
dialog {
margin: auto; /* 居中必需 */
padding: 1em;
}-
::backdrop不能加z-index，否则在 Safari 下 backdrop 消失 - 不要用
background: #0008简写——部分 Safari 版本不识别 - 如果 backdrop 显示但点击无反应，检查是否漏了
dialog的body子元素约束
关闭逻辑必须同时监听 click 和 close 事件，且区分触发源
点击 backdrop 不会自动触发 close 事件，这是规范行为。仅监听 close 会导致 backdrop 点击完全无响应。
基础双路径处理：
dialog.addEventListener('click', e => {
if (e.target === dialog) dialog.close('backdrop');
});
dialog.addEventListener('close', () => {
console.log('return value:', dialog.returnValue); // 仅当 close('x') 或 formmethod="dialog" 才有值
});- Safari 15.4–16.3 中
e.target常为body，需 fallback 到坐标判断：e.clientX < dialog.getBoundingClientRect().left - 不要用
oncancel="event.preventDefault()"——它会禁掉 Esc 和所有退出方式 - 异步操作（如提交前校验）不能依赖
showModal()阻塞 JS，得用await new Promise(...)封装
关键点其实就两个：DOM 位置和事件路径都绕不开浏览器原生机制的硬性约定，任何试图“绕过”的写法（比如用 CSS 强行显示、用 display: block 替代 showModal()）都会在焦点、Esc、backdrop 三者中至少崩掉一个。
