showmodal()是模态弹窗唯一有效入口，启用原生模态协议：禁用背景焦点、拦截tab、响应escape、生成::backdrop、聚焦首个可聚焦子元素；show()仅设open属性，无模态行为。
showModal() 是模态弹窗的唯一有效入口
不调用 showModal()，就不存在真正意义上的模态体验。它不是“增强版 show”，而是开关——启用浏览器原生模态协议：自动禁用背景焦点、拦截 Tab 键、响应 Escape、生成 ::backdrop、聚焦第一个可聚焦子元素。你写 <dialog open></dialog> 或调用 show()，页面照样能滚动、点击按钮、按 Tab 切到背景输入框，用户根本感知不到“被阻塞”。
常见误用场景包括：用 show() 做登录弹窗、确认对话框、表单提交前校验层——这些都该用 showModal()，否则等于没做模态。
-
showModal()调用失败时抛DOMException: The element does not have a namespace，大概率是脚本在DOMContentLoaded前执行，或dialog元素尚未挂载到 DOM - Firefox 当前（2026 年）仍不渲染
::backdrop（仅逻辑阻塞），Chrome/Edge 111+ 和 Safari 17.4+ 支持，但必须手动加 CSS：dialog::backdrop { background: rgba(0,0,0,0.5); } - 若
dialog嵌套在transform或overflow: hidden容器里，showModal()本身仍能居中显示，但::backdrop可能被裁剪——最佳实践是直接挂到document.body下
show() 几乎只适合悬浮提示类轻量场景
show() 的作用非常有限：它只是设置 open 属性并让元素可见，不触发 ::backdrop，不改变堆叠上下文，也不影响页面其余部分。它仍受父容器 transform、z-index、overflow 约束，定位可能错乱，甚至被完全裁剪。
典型可用场景只有两类：带箭头的工具提示（tooltip）、临时悬浮操作面板（如编辑器右键菜单浮层）。一旦涉及用户决策、数据输入、流程中断，就该换 showModal()。
- 调用
show()后点击遮罩？压根没有遮罩，点哪都穿透 - 按 Escape 关闭？不会触发任何行为，
close事件也不会发 - Tab 键能否跳出？完全可以，焦点管理全靠你自己实现
- 想让它“看起来像模态”？别硬改 CSS 模拟——不如直接用
showModal()+ 补齐样式和事件
点击 backdrop 关闭必须手动监听，且 Safari 不可靠
浏览器从不默认绑定“点击遮罩关闭”逻辑。showModal() 创建的 ::backdrop 是伪元素，不参与事件冒泡路径，Safari 中 e.target === dialog 几乎永远为 false。依赖这个判断的代码在 Safari 15.4–17.6 下会完全失效。
兼容写法需分环境处理：
- Chrome/Edge 120+：可用
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari：必须 fallback 到坐标判断，例如检查
e.clientX是否落在dialog.getBoundingClientRect()范围外 - 绝对不要对
dialog::backdrop尝试添加事件监听——它不是真实节点，无法 attach listener - 如果用了
show()，此整套逻辑直接无效，因为根本没有 backdrop
close() 不是终点，焦点、returnValue、事件监听都得自己补
close() 只做两件事：移除 open 属性、触发 close 事件。其余所有关键副作用都得手动处理，否则键盘用户、Safari 用户立刻掉坑里。
- 焦点不会自动回到触发按钮，必须显式调用
triggerBtn.focus()或至少document.body.focus() -
dialog.returnValue在 Chrome/Edge/Firefox 中可用（如dialog.close('confirmed')），但 Safari 17.6 及之前版本始终返回空字符串，不能用于传值 - 按 Escape 关闭会触发
close事件，但你不写dialog.addEventListener('close', handler)就收不到 -
method="dialog"表单提交可自动关闭并设returnValue，但 Safari 仍不支持该值读取——别把它当跨浏览器通信通道
真正难的从来不是调用 showModal()，而是 Safari 下 backdrop 渲染不可靠、焦点管理缺失、returnValue 不一致这三件事。它们不报错，但上线后第一个键盘用户就会卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
