“cannot read property 'showmodal' of null”错误源于javascript未找到dialog元素，主因是dom未就绪或选择器错误；解决方法为将script移至/body前或用domcontentloaded监听。
Cannot read property 'showModal' of null 是 DOM 没就绪或选错元素
这个报错不是 dialog 本身的问题，而是 JavaScript 找不到那个 dialog 元素。最常见两种情况：
- 脚本在
<dialog></dialog>标签解析前就执行了，比如<script></script>放在里且没加延迟 - 用了错误的选择器，比如
document.querySelector('.my-dialog')但实际没加 class，或者 id 拼错了
解决方法只有两个可靠路径：
- 把
<script></script>标签移到前面（最简单） - 或者用
document.addEventListener('DOMContentLoaded', () => { /* 调用 showModal */ })
别信“加个 setTimeout 就行”——这不可靠，尤其在低端设备或高延迟加载场景下会翻车。
DOMException: The element is already in a top layer 是 showModal 连续调用导致的
浏览器规范强制限制：任意时刻只能有一个 dialog 处于顶层（top layer）。第二次调用 showModal() 必然失败，报这个错。这不是 z-index、CSS 或嵌套结构的问题，是硬性规则。
- 哪怕你先
dialog.close()，再立刻showModal()，如果上一个还没完全退出动画或焦点回收完成，也可能触发该异常 - 同一个
dialog元素重复调用showModal()也会报错（它已经在那里了） -
show()不进顶层，所以连用多次不会报这个错，但它也不模态——背景可点、Tab 可穿透、没遮罩
真正需要“多层弹窗”时，只能换思路：
- 复用单个
dialog，用 JS 替换内部 HTML，并维护一个栈记录历史状态 - 手动调用
dialog.querySelector('[autofocus]')?.focus()，否则键盘用户会卡在空白处 - 放弃原生
dialog，改用<div role="dialog" aria-modal="true"> 手写弹层（此时得自己管 <code>z-index、inert、aria-hidden和 backdrop 点击判定）点击遮罩不关闭，或 Safari 下 e.target 总是 body
原生
dialog规范压根没定义“点击 backdrop 关闭”行为，所以所有这类逻辑都得手写监听，而且 Safari 15.4–16.3 和 17.6 都有严重兼容问题：点击灰色区域时e.target经常不是dialog，而是body或内部按钮。- 基础监听写法：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari fallback 必须加：判断坐标是否落在
dialog区域外，例如if (e.clientX - 千万别给
dialog设pointer-events: none，这会让showModal()的焦点锁定彻底失效 - 如果用了
show()，这段监听完全无效——因为show()根本不生成::backdrop
dialog 不显示、错位、Safari 白屏或焦点丢失
这些表象背后，90% 是 DOM 结构或父级样式违规。原生
dialog对渲染上下文极其敏感，不是“写对了标签就行”。-
<dialog></dialog>必须是的**直接子元素**；嵌套在<main></main>、<div class="app"> 或任何带 <code>transform/will-change/overflow: hidden的父容器里，都会导致 backdrop 缺失、定位偏移、甚至 Safari 直接白屏 - React/Vue 项目中，必须确保
dialog挂载到document.body，不能留在组件自己的 wrapper div 里 - Safari 17.6 下，若父容器有
transform，dialog可能完全不渲染或焦点失效，此时 polyfill 或手写弹层也容易连锁崩溃 - 别手动设
dialog.open = false或dialog.removeAttribute('open')来关闭——这会残留 backdrop、不触发close事件、后续showModal()调用异常
最容易被忽略的是：即使只用单层
dialog，Safari 下也必须为dialog::backdrop显式补全样式，且点击关闭逻辑必须带坐标 fallback——靠e.target === dialog在 Safari 里就是不可靠的。 - 基础监听写法：
