dialog 元素默认隐藏，需添加 open 属性或调用 show()/showModal() 才显示；backdrop 点击不自动关闭，须手动监听并判断 target；表单提交需 preventDefault；样式和焦点需手动处理以确保兼容性与可访问性。
dialog 元素不显示？检查 open 属性和 JavaScript 控制
原生 <dialog></dialog> 默认是隐藏的，没有 open 属性或 JS 调用就完全不会渲染到视口里。很多人写完 HTML 就以为能弹出来，结果页面上啥也没有。
- 必须显式添加
open属性才能初始显示：<dialog open>...</dialog> - 用 JS 控制时，
dialog.show()和dialog.showModal()效果不同：前者不阻塞背景交互，后者才真正是“模态”（背景变灰、Tab 键受限、Esc 关闭） -
dialog.close()只会移除open属性，不会自动移除元素；如果反复创建又不清理，可能积累多个<dialog></dialog>节点
点击遮罩层不关闭？dialog 的 backdrop 点击行为需手动绑定
<dialog></dialog> 的灰色遮罩（backdrop）默认**不响应点击事件**，哪怕你点了背景也不会关闭——这不是 bug，是设计如此。很多开发者误以为它像 Bootstrap 那样点背景自动关，结果用户卡住了。
- 监听
click事件时，要区分点击目标：event.target === dialog才是点在遮罩上，点在内部内容区则event.target是子元素 - 推荐写法：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - 注意 Safari 15.4+ 才支持 backdrop click 事件；旧版 Safari 或部分安卓 WebView 中，
e.target可能始终是，得 fallback 到dialog.hasAttribute('open')+ 坐标判断
表单提交后 dialog 不关闭？submit 会触发页面刷新
在 <dialog></dialog> 里放 <form></form> 很常见，但直接用 type="submit" 会导致整个页面 reload，dialog 看似“闪退”，其实是页面重载了。
- 阻止默认行为是必须的：
form.addEventListener('submit', e => { e.preventDefault(); /* 处理逻辑 */ dialog.close(); }); - 别依赖
<button onclick="dialog.close()"></button>关闭，因为 form 提交优先级更高，可能根本没执行到 onclick - 如果后端返回 JSON，记得设
form.setAttribute('method', 'POST')和form.setAttribute('enctype', 'application/json')，否则 fetch/fetch-like 行为不一致
样式兼容性差？dialog 默认样式极简且各浏览器差异大
<dialog></dialog> 没有统一默认样式：Chrome 显示圆角白底带阴影，Firefox 是无边框透明块，Safari 甚至默认不居中。不加 CSS，它大概率难看又难用。
立即学习“前端免费学习笔记（深入）”；
- 必须重置定位：
dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }，否则在 Safari 中可能贴顶或偏左 -
::backdrop伪元素控制遮罩样式，但仅 Chrome 和 Firefox 支持；Safari 目前忽略，得用额外<div class="backdrop"> 模拟<li>focus 管理容易被忽略：打开后焦点不会自动进 dialog，需手动 <code>dialog.querySelector('input')?.focus()，否则键盘用户无法操作
最麻烦的不是写法，是 focus 管理、键盘导航（Tab 循环、Esc 关闭）、屏幕阅读器语义这些细节——它们不报错，但一上线就被真实用户发现。原生 dialog 看似简单，实则每个交互分支都得亲手补全。
