必须调用 showmodal() 才具备模态特性：否则无遮罩、tab 可穿透、esc 不关闭；popover="manual" 仅 chromium 114+ 支持，safari/firefox 不兼容，且需显式调用 showpopover()。
dialog 必须用 showModal() 才算真正“模态”
写了 <dialog></dialog> 却没反应？不是浏览器 bug，是你没调用 showModal()。只加 open 属性或设 dialog.open = true，只会让元素“可见”，但：
– 没 ::backdrop 遮罩层
– Tab 键能穿透到背景页
– Esc 键不关闭
– 点击背景也不触发关闭逻辑
– Safari 15.4–16.3 下甚至可能完全不渲染 backdrop
正确姿势：
– 确保 <dialog></dialog> 是 的直接子元素
– 在 DOMContentLoaded 后获取元素，再调用 dialog.showModal()
– 关闭必须用 dialog.close()，别用 remove() 或 display: none，否则焦点管理失效
popover="manual" 不是“加了就弹”，且仅 Chromium 114+ 可用
popover 属性不能写在按钮上，比如 <button popover="auto"></button> —— 浏览器直接忽略，不报错也不生效。它只能加在弹出容器（如 <div popover="manual">）上，且必须显式调用 <code>target.showPopover() 才显示。
现实限制很硬：
– Safari 当前所有版本（截至 2026 年 9 月）不支持 popover
– Firefox 全系列未实现，也无明确路线图
– Chrome/Edge 114+ 才开始支持，且 showPopover() 方法在旧版中根本不存在
– 没有 ::backdrop、不支持点击遮罩关闭、无箭头定位、不响应 Esc
如果你的项目需兼容 Safari 或 Firefox，现在用 popover 就等于主动放弃一部分用户。它目前更适合做“未来特性占位符”，而非生产方案。
点击遮罩关闭 dialog 要手动监听，且 Safari 有坐标 fallback 坑
规范没定义“点击 backdrop 关闭”，所以浏览器不会自动处理。你得自己监听 click 事件并判断目标：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); });
但这在 Safari 15.4–16.3 中会失效——e.target 总是 document.body，不是 dialog。必须加一层坐标判断：
const rect = dialog.getBoundingClientRect();<br>if (e.clientX rect.right ||<br> e.clientY rect.bottom) {<br> dialog.close();<br>}
别给 dialog 设 pointer-events: none，这会让 showModal() 的焦点锁定彻底瘫痪，Tab 键直接跳出弹窗。
form 提交刷新页面？method="dialog" 是最简解，但仅限同步场景
放在 <dialog></dialog> 里的 <form></form> 默认仍会整页 reload。常见错误是：加了 dialog.close() 却发现根本没执行——因为页面已经跳走了。
两种可靠做法：
– 纯前端关闭：给 <form></form> 加 method="dialog"，submit 后自动关闭，并设 dialog.returnValue（注意：该值只能是字符串，且关闭后无法再读取）
– 异步提交（如 fetch）：必须在 submit 事件中调用 e.preventDefault()，手动发请求，再调 dialog.close()
– 别依赖 dialog.close() 返回 Promise 做逻辑分支：Safari 不支持其返回值，要用 close 事件监听
真正容易被忽略的是层级与可访问性耦合点：<dialog></dialog> 自带焦点管理、ARIA 语义和 returnFocus 行为；而 popover 连基础的 inert 或焦点捕获都没有。一旦混用（比如 popover 盖住 dialog），Safari 用户可能直接卡死在表单中途——这不是样式问题，是原生行为栈冲突。
