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 中静态存在，且是的直接子元素（不能嵌套在<main></main>、<div class="app"> 里） <li>脚本必须等 DOM 就绪后再执行：用 <code>DOMContentLoaded，或把<script></script>放在前 - 如果
<dialog></dialog>是框架动态渲染（如 React/Vue），得监听节点插入完成，比如用MutationObserver或框架提供的mounted/useEffect钩子 - 别手动删
open属性——showModal()会自动加，但删了它又不重调，DOM 就“卡住”在非激活态 - 这不是 z-index、CSS 或 DOM 结构问题，和样式完全无关
- 哪怕你用两个不同 ID 的
<dialog></dialog>，只要第一个还没关，第二个调用就立刻被拒 -
show()不进顶层，不锁背景，Tab 键仍可穿透，不能替代showModal()实现模态阻断 - 真要“多层效果”，只能复用单个
<dialog></dialog>，通过 JS 替换内部 HTML + 维护状态栈；或者彻底放弃原生，手写<div role="dialog"> 并自己管 <code>inert、aria-hidden、焦点和 backdrop 点击判定父容器 CSS 导致定位错位或 backdrop 不出现
即使
showModal()成功执行，<dialog></dialog>也可能偏移、裁剪、甚至完全不可见——尤其在 Safari 中。- 父容器设了
transform、will-change或overflow: hidden，会截断::backdrop渲染或导致弹窗定位异常 - Safari 17.6 仍有严重缺陷：只要父级有
transform，<dialog></dialog>可能错位、消失、焦点失效 - 别给
<dialog></dialog>设pointer-events: none，这会让焦点锁定彻底失效 -
::backdrop在 Firefox 中至今（2026 年中）不渲染样式，只做逻辑遮罩；Chrome/Edge/Safari 需手动补dialog::backdrop { background: rgba(0,0,0,0.5); }
点击 backdrop 不关闭，或关闭后焦点丢失
原生
<dialog></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 用户手里，就立刻暴露出来。 - 父容器设了
连续调用 showModal() 报 “already in a top layer”
浏览器只允许一个 <dialog></dialog> 处于顶层（top layer），第二次调 showModal() 必然失败，错误是：DOMException: The element is already in a top layer。
