必须调用showModal()才能实现完整模态行为（遮罩、焦点锁定、Esc/点击关闭），show()仅显示浮动框；Safari 16.4前不支持showModal()，需检测并降级；表单提交需preventDefault()并手动close()。
dialog元素必须用showModal()才能真正弹出
直接设置open属性或用show()在多数浏览器里不会触发模态行为（比如背景变灰、焦点锁定、Esc关闭），实际只是显示一个浮动框。真正实现“对话框”语义和交互，必须调用showModal()——它会自动处理遮罩层、焦点捕获、Esc/点击 backdrop 关闭等逻辑。
常见错误：写成document.getElementById('myDialog').open = true，或者只调用show()，结果发现按 Esc 没反应、点背景不关闭、Tab 键能切到背后页面。
-
showModal()是唯一能激活完整模态体验的方法，且会阻塞后续 JS 执行（直到 dialog 关闭） -
show()适合做非模态浮层（比如工具提示），不接管焦点也不拦截交互 - 若需异步打开（如等待 API 返回后弹窗），记得把
showModal()放在then()或await之后，别被 Promise 链吞掉异常
必须手动添加close()逻辑，否则无法关闭
dialog不会自动绑定关闭行为。即使用户点了 Esc 或点击 backdrop，也只会在调用showModal()的前提下生效；但点击内部“确定”“取消”按钮仍需你显式调用close()，否则 dialog 一直挂着。
典型遗漏：写了<button>确认</button>却没绑事件，或者绑了但忘记调用dialog.close()。
立即学习“前端免费学习笔记（深入）”；
- 推荐在 dialog 内部按钮上直接绑定：
<button onclick="this.closest('dialog').close()">关闭</button> - 监听
close事件可做收尾清理：dialog.addEventListener('close', () => console.log('用户已关闭')) - 不要依赖
click事件监听 backdrop —— 它不冒泡，且showModal()生成的 backdrop 无 DOM 节点，只能靠原生行为或cancel事件
dialog在 Safari 中需要 polyfill 或降级方案
Safari 15.4 之前完全不支持dialog，15.4–16.3 仅支持show()，showModal()直到 Safari 16.4 才稳定可用。如果目标用户含较老 macOS/iOS 设备，不能只靠if ('showModal' in HTMLDialogElement.prototype)简单判断。
真实兼容性陷阱：开发时用最新 Chrome 测试没问题，上线后收到大量“点不动”反馈，查日志发现全是 Safari 16.2 用户。
- 检测是否真正可用：
typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype - 不满足时建议 fallback 到
div+aria-modal="true"+手动焦点管理，而非强行用show()假装模态 - 避免用
display: none控制 visibility —— 会破坏showModal()的初始焦点逻辑，改用hidden属性或opacity: 0; pointer-events: none
表单提交后 dialog 不自动关闭？检查method和onsubmit
在dialog里放<form>很常见，但默认提交会刷新页面或跳转，导致 dialog 看似“没关”，其实是整个页面重载了。这不是 dialog 的 bug，而是表单行为未被拦截。
尤其容易忽略的是：用了method="dialog"却不了解它的限制 —— 它只适用于<button formmethod="dialog">这种触发表单关闭的按钮，不是给整个 form 用的。
- 最稳妥方式：给 form 绑定
onsubmit="event.preventDefault(); this.closest('dialog').close(); // 其他逻辑" -
method="dialog"仅对<button type="submit" formmethod="dialog">有效，且只会关闭 dialog，不提交数据 - 若需提交 + 关闭，必须手写 fetch 或 FormData 提交，并在 then 里调
close()，别指望浏览器自动联动
close()调用，漏掉就等于没做。 
