dialog 默认不显示，需用 show() 或 showmodal() 激活；推荐优先用 showmodal() 实现真模态，关闭必须调用 close() 重置状态；需手动添加 css 样式与无障碍支持。
dialog 元素默认不显示，必须手动调用 show() 或 showModal()
很多人写完 <dialog></dialog> 发现页面上啥也没有——这不是 bug，是标准行为。<dialog></dialog> 初始状态为 display: none，不会自动渲染到界面上。必须通过 JavaScript 显式触发。
推荐优先用 showModal()：它会自动添加背景遮罩、禁用底层交互、聚焦到 dialog 内第一个可聚焦元素，并支持 Esc 关闭和点击 backdrop 关闭（需注意浏览器兼容性）。
-
show()：无模态，不锁底层，不加 backdrop，适合悬浮提示类场景 -
showModal()：真模态，但 Safari 15.4+ 才完全支持 backdrop 点击关闭（旧版需手动监听click判断是否点在event.target === dialog） - 别忘了给 dialog 加
id，否则 JS 获取困难：<dialog id="confirm-dialog"></dialog>
关闭 dialog 必须显式调用 close()，不能只靠 remove() 或 hidden 属性
直接删 DOM 节点或设 hidden 属性，会导致 dialog 状态混乱：比如 showModal() 后底层仍被锁定（inert 状态残留），或者再次调用 showModal() 报错 “The element is already active”。
正确做法永远是调用 dialog.close()。它会重置内部状态、移除 inert、恢复焦点管理。
- 绑定关闭按钮时，确保事件处理器里调用的是
dialog.close()，不是dialog.remove() - 监听
close事件可捕获关闭动作：dialog.addEventListener('close', () => { console.log('closed with:', dialog.returnValue); }) -
dialog.returnValue可在close('confirmed')时传值，用于区分“确认”“取消”等操作
样式必须重置，否则在不同浏览器中表现差异极大
<dialog></dialog> 的默认样式几乎不可用：Chrome 给圆角和阴影，Firefox 没阴影、边框极细，Safari 甚至默认不居中。不加 CSS 就上线，等于放弃一致性。
最简可用样式组合：
dialog {
border: 1px solid #ccc;
border-radius: 6px;
padding: 1rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
margin: 0;
}
dialog::backdrop {
background-color: rgba(0,0,0,0.5);
}
-
margin: 0很关键——否则 Chrome/Firefox 默认有外边距，导致居中偏移 -
dialog::backdrop在 Safari 中需配合showModal()才生效；若要兼容旧 Safari，得自己手写遮罩层 - 不要依赖
width百分比，改用max-width+min-width更稳妥
无障碍支持不能省，尤其 focus 管理和 role 属性
原生 <dialog></dialog> 自带 role="dialog" 和 aria-modal="true"，但仅当用 showModal() 时才真正生效。如果手动实现模态逻辑，这些属性不会自动补全。
实际使用中容易漏掉三点：
- 打开前，记录并保存当前焦点元素（
document.activeElement），关闭后手动恢复 - dialog 内至少有一个可聚焦子元素（如
<button></button>或tabindex="0"的容器），否则showModal()可能焦点丢失 - 避免在 dialog 外部放置
tabindex="0"元素，否则键盘 Tab 仍可能跳出去（inert会处理，但需确保没手动绕过）
复杂交互（比如表单提交后保持 dialog 打开并聚焦错误字段）需要额外 focus 控制逻辑，原生 dialog 不会帮你做这件事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
