showModal()报错仅两类：元素未找到或已处于顶层；前者因脚本执行过早、DOM未就绪或元素非body直系子级，后者是浏览器规范限制，连续调用必报“already in a top layer”。
showModal() 报错基本就两类：元素没找到，或元素已处于顶层。前者是开发阶段高频问题，后者是误用逻辑导致的规范限制，不是 bug。
调用时元素为 null 或未挂载
最常见的是脚本执行太早，document.querySelector('dialog') 返回 null，接着调 showModal() 就报 Cannot read property 'showModal' of null。
- 确保
<dialog></dialog>在 HTML 中静态存在，且是<body>的直接子元素（不能嵌套在<main>、<div class="app">里） - 脚本必须等 DOM 就绪后再执行：用
DOMContentLoaded，或把<script>放在</body>前 - 如果
<dialog></dialog>是框架动态渲染（如 React/Vue），得监听节点插入完成，比如用MutationObserver或框架提供的mounted/useEffect钩子 - 别手动删
open属性——showModal()会自动加，但删了它又不重调，DOM 就“卡住”在非激活态
连续调用 showModal() 报 “already in a top layer”
浏览器只允许一个 <dialog> 处于顶层（top layer），第二次调 showModal() 必然失败，错误是：DOMException: The element is already in a top layer。
- 这不是 z-index、CSS 或 DOM 结构问题，和样式完全无关
- 哪怕你用两个不同 ID 的
<dialog>，只要第一个还没关，第二个调用就立刻被拒 -
show()不进顶层，不锁背景，Tab 键仍可穿透，不能替代showModal()实现模态阻断 - 真要“多层效果”，只能复用单个
<dialog>，通过 JS 替换内部 HTML + 维护状态栈；或者彻底放弃原生，手写<div role="dialog">并自己管inert、aria-hidden、焦点和 backdrop 点击判定
父容器 CSS 导致定位错位或 backdrop 不出现
即使 showModal() 成功执行，<dialog> 也可能偏移、裁剪、甚至完全不可见——尤其在 Safari 中。
立即学习“前端免费学习笔记（深入）”；
- 父容器设了
transform、will-change或overflow: hidden，会截断::backdrop渲染或导致弹窗定位异常 - Safari 17.6 仍有严重缺陷：只要父级有
transform，<dialog>可能错位、消失、焦点失效 - 别给
<dialog>设pointer-events: none，这会让焦点锁定彻底失效 -
::backdrop在 Firefox 中至今（2026 年中）不渲染样式，只做逻辑遮罩；Chrome/Edge/Safari 需手动补dialog::backdrop { background: rgba(0,0,0,0.5); }
点击 backdrop 不关闭，或关闭后焦点丢失
原生 <dialog> 的 ::backdrop 点击不触发默认关闭行为，Safari 下 e.target === dialog 判断基本不可靠。
- Chrome/Edge 120+ 可用
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari 15.4–17.6 必须降级为坐标判断：检查
e.clientX是否落在dialog.getBoundingClientRect()范围外 -
close()不自动还焦——关闭后必须手动调triggerBtn.focus()，否则键盘用户卡在空白处 -
dialog.returnValue在 Safari v17.6 中始终为空字符串，不能用于传值；表单提交用method="dialog"时，按钮必须带value属性才能让其他浏览器拿到值
真正容易被忽略的，是 Safari 对 ::backdrop 的处理不一致、焦点管理缺失、以及 returnValue 完全不可用——它们不报错，也不影响视觉，但一到真实键盘或 iOS 用户手里，就立刻暴露出来。
