showModal()是<dialog>成为模态弹窗的唯一开关，不调用则浏览器不渲染、不占布局；调用后不可见主因是DOM未就绪、元素未选中、open被误删或父容器CSS干扰。
showModal() 是让 <dialog> 真正变成模态弹窗的开关，不调用它，弹窗就不存在——不是“没显示”，是浏览器压根不渲染、不占布局、getBoundingClientRect() 返回空对象。
为什么调用了 showModal() 还看不到弹窗？
根本原因几乎总是 DOM 状态或执行时机问题，而非代码写错：
- 脚本在
DOMContentLoaded之前运行，document.querySelector('dialog')返回null，报Cannot read property 'showModal' of null -
<dialog>是动态插入的（比如框架中v-if或innerHTML渲染），但你没等它挂载完成就调了showModal() - 手动删了
open属性：showModal()会自动加，但删了它又不重调，DOM 就卡在“非激活态” - 父容器有
transform、will-change或overflow: hidden，尤其在 Safari 中会导致弹窗偏移、裁剪甚至完全不可见
点击遮罩层（::backdrop）为什么不关闭？
这不是 bug，是规范设计：原生 showModal() 不绑定“点背景关窗”逻辑，::backdrop 是伪元素，无法直接监听事件，也不保证事件冒泡到 <dialog>。
- Chrome/Edge 120+ 可靠支持
e.target === dialog判断是否点在遮罩上 - Safari 15.4–17.6 中
e.target几乎永远不是dialog，得 fallback 到坐标判断，例如：e.clientX < dialog.getBoundingClientRect().left - 千万别写
dialog.addEventListener('click', () => dialog.close())——这会让点按钮也关窗 -
show()根本没有 backdrop，这段监听完全无效
showModal() 和 close() 配合时容易漏的关键动作
这两个方法看似简单，但几个副作用必须手动补全，否则键盘用户或 Safari 用户会卡住：
立即学习“前端免费学习笔记（深入）”；
-
close()不会自动把焦点还给触发按钮，需显式调用triggerBtn.focus()，否则 Tab 键用户无法继续操作 -
dialog.returnValue在 Chrome/Firefox/Edge 中可用（如dialog.close('confirmed')），但 Safari（v17.6）始终返回空字符串，不能用于传值 - 按 Esc 关闭会触发
close事件，但你不监听就收不到——必须写dialog.addEventListener('close', handler) -
showModal()不清理 DOM，反复打开同一<dialog>没内存泄漏；但如果每次新建节点却不移除，DOM 会越积越多
真正麻烦的不是语法，而是 Safari 的 ::backdrop 行为不一致、焦点管理缺失、以及 returnValue 不可用——这些细节在开发阶段很难暴露，往往上线后才被键盘用户或 iOS 用户反馈出来。
