dialog不显示需调用showModal()；仅加open属性无遮罩、不锁焦点；Safari存在e.target兼容问题；表单提交需method="dialog"或preventDefault()；样式需手动居中并设backdrop；降级时须补全焦点与无障碍支持。
dialog不显示？先确认是否调用了showModal()
写了<dialog></dialog>却完全看不到，不是 CSS 问题，是根本没“启动”它。原生dialog默认不渲染、不占布局、getBoundingClientRect()返回空值——它连 DOM 绘制都跳过。
仅加open属性（如<dialog open></dialog>）能让内容可见，但无 backdrop、不锁焦点、不响应 Esc，只是“浮层”，不是模态框。
- 必须用
dialog.showModal()才真正激活模态行为；show()几乎不用，它不加遮罩、Tab 键可穿透到背景页 - 脚本执行早于 DOM 加载会报
Cannot read property 'showModal' of null：把<script>放在</body>前，或包裹在DOMContentLoaded里 - 别手动设
dialog.open = true或dialog.style.display = 'block'，这绕过原生焦点管理，Tab 键直接失效
点击遮罩关闭不了？得自己监听并判断e.target === dialog
dialog的::backdrop默认不可点击，也不冒泡事件——规范里就没定义“点背景关窗”，这不是 bug，是设计如此。
正确写法：dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); });
立即学习“前端免费学习笔记（深入）”；
- Safari 15.4–16.3 存在兼容陷阱：点击 backdrop 时
e.target可能始终是body，需 fallback 判断坐标，例如e.clientX - 千万别写成
dialog.addEventListener('click', () => dialog.close())，这会让点击内部按钮也关闭对话框 -
show()没有backdrop，这段监听无效；只对showModal()生效
表单提交后页面刷新？method="dialog"是最简解
在<dialog></dialog>里放<form></form>很常见，但默认提交会整页 reload，看起来像“弹窗闪退”。
- 最简方案：给
form加method="dialog"属性，提交后自动触发dialog.close()并设置dialog.returnValue，不刷新页面 - 需要异步提交（如
fetch）时，必须在submit事件中调用e.preventDefault()，再手动dialog.close() - 别把关闭逻辑写在按钮的
onclick里——用户按回车提交会漏掉 - 注意
enctype默认是application/x-www-form-urlencoded；传 JSON 时要显式设为application/json
样式错位、焦点丢失、Safari 不居中？这些全得手写
dialog几乎没有跨浏览器一致的默认样式：Chrome 圆角白底带阴影，Firefox 是透明块，Safari 默认不居中，且在父元素有transform或will-change时可能完全不渲染。
- 强制居中需重置定位：
dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } - 必须显式设置
width、max-width、margin，否则可能过窄或溢出 -
dialog::backdrop在 Firefox 中不支持，Safari 15.4+ 才开始支持；Chrome 支持但默认透明度低，建议显式设background-color: rgba(0,0,0,0.5) - 焦点管理依赖原生行为，若自定义按钮未设
type="button"，可能意外触发表单提交或页面跳转
dialog当默认路径，只在!('showModal' in HTMLDialogElement.prototype)时降级——此时再用div模拟，且复用同一套事件逻辑和语义结构。真正容易被忽略的是：所有 polyfill 都无法还原原生的焦点锁定与屏幕阅读器通告顺序，这部分必须在降级路径中单独补全。 
