<dialog>不是“写完就弹”，必须调用showModal()才启用遮罩、焦点锁定和ESC关闭；仅设open属性或手动控制display会破坏原生模态语义，导致Tab失效、Esc无响应。
dialog 元素不是“写完就弹”，必须调用 showModal() 才能真正启用模态行为——否则它只是个 display: none 的空节点，连 DOM 渲染都跳过。
为什么写了 dialog 却完全没反应
常见错误是只放了 HTML 标签，没配 JS 控制逻辑：<dialog id="myDialog"><p>内容</p></dialog> 这样写页面上什么都不会出现。
-
dialog默认不参与布局，加open属性（<dialog open>）虽能强制显示，但会绕过焦点管理、Esc 关闭和 backdrop 锁定，属于反模式 - 必须通过 JS 调用
dialog.showModal()，浏览器才会：自动插入::backdrop、禁用背景交互、聚焦第一个可聚焦子元素、响应 Escape 键 - 旧版 Safari（15.4 之前）、IE 完全不支持
showModal()；Chrome/Edge/Firefox 98+ 已稳定支持 - 别用
dialog.hidden = true或dialog.style.display = 'none'控制显隐——这会破坏原生模态语义，导致 Tab 键失效、close()后焦点不归还
点击遮罩层（::backdrop）不关闭怎么办
这是规范行为，不是 bug。showModal() 创建的 backdrop 默认不可点击关闭，需手动监听并判断点击位置。
- 正确监听方式：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 存在兼容问题：e.target 在 backdrop 上可能始终是
body，此时需 fallback 判断坐标：const rect = dialog.getBoundingClientRect(); if (e.clientX rect.right || e.clientY rect.bottom) dialog.close(); - 若想禁用点击 backdrop 关闭，直接加
oncancel="event.preventDefault()"到dialog标签上即可 - 别给
dialog设pointer-events: none——这会让showModal()的焦点锁定彻底失效
表单提交后 dialog 没关，或整个页面刷新了
因为 <form> 在 dialog 内默认会触发表单提交，dialog.close() 根本没机会执行。
- 必须在
form的submit事件中调用event.preventDefault() - 关闭逻辑要写在
submit回调里，而不是靠按钮的onclick——否则用户按 Enter 提交时仍会刷新 - 轻量操作（如复制链接、切换状态）优先用
<button type="button">，避免意外触发 form 行为 - 别依赖
dialog.returnValue做通用返回值处理：它只在dialog.close('value')显式传参时有效，且不适用于 Esc 关闭、点击 backdrop 等路径
React/Vue 等框架里怎么安全使用 dialog
不能直接靠状态驱动渲染（如 {isOpen && <dialog>...</dialog>}），因为框架 diff 机制会销毁/重建节点，导致 showModal() 状态丢失、焦点归还不生效。
立即学习“前端免费学习笔记（深入）”；
- 必须用 ref 持有原生 DOM 引用，在状态变更时手动调用
ref.current?.showModal()或ref.current?.close() - 首次挂载后，检查
ref.current?.hasAttribute('open')再决定是否聚焦，防止 SSR 渲染错乱 - 别在
useEffect里反复调用showModal()—— Safari 下会报错 “The element is already active” - dialog 必须是
body的直接子级，否则可能被父容器的overflow: hidden截断，或 z-index 失效
dialog.showModal() 承诺了焦点管理、键盘导航、背景锁定三件事，任何绕过它的手动控制（比如用 CSS 切换 display、用 hidden 属性）都在悄悄撕毁这份契约。 
