dialog元素默认隐藏，需用JavaScript的show()或showModal()方法显示；showModal()为模态对话框，支持Esc关闭和焦点锁定；需手动管理焦点、关闭逻辑及backdrop兼容性。
dialog 元素必须配合 JavaScript 才能显示
直接写 <dialog></dialog> 不会自动弹出，它默认是隐藏的（display: none），且不支持 open 属性的 HTML 声明式开启。必须调用 show() 或 showModal() 方法才能让它可见。
常见错误是只写 HTML 却没调 JS，页面里完全看不到弹窗；或者误以为加 open 属性就能生效（实际该属性只是反映当前打开状态，不是控制开关）。
-
show()：显示非模态对话框（背景可点击、Tab 可跳出） -
showModal()：显示模态对话框（焦点强制锁定在 dialog 内，Esc 可关闭，推荐用于设置面板） -
close()必须由 JS 触发，不能靠点击外部自动关闭（除非手动监听click事件判断位置）
设置面板需要 focus 管理和键盘支持
原生 <dialog> 在 showModal() 后会自动将焦点移到第一个可聚焦子元素，但如果你的设置面板里全是 <div> 或 <span>，就可能焦点丢失或卡在 body 上——导致 Tab 键失效、Esc 无法关闭。
解决方法是在 dialog 内部显式放置一个 tabindex="-1" 的容器，并在 showModal() 后主动 .focus() 它：
立即学习“前端免费学习笔记（深入）”；
<dialog id="settings-dialog">
<div tabindex="-1" id="dialog-root">
<h3>设置面板</h3>
<label>主题：<select><option>light</option><option>dark</option></select></label>
<button id="save-btn">保存</button>
</div>
</dialog>
然后 JS 中：
const dialog = document.getElementById('settings-dialog');
dialog.showModal();
document.getElementById('dialog-root').focus();
关闭逻辑要覆盖所有常见路径
用户关闭设置面板的方式不止一种：点「×」按钮、按 Esc、点遮罩层（backdrop）、点「取消」按钮。原生 <dialog> 只自动响应 Esc 和 close() 调用，其他都得自己补。
- 监听
close事件（不是closed）来清理状态或重置表单 - 给 backdrop 关闭加监听：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - 「×」按钮和「取消」按钮统一调
dialog.close()，不要用remove()或hidden = true - 避免在
close事件里再调close()，会报错"The dialog element is not open."
样式兼容性与 backdrop 控制需手动处理
Firefox 和 Safari 对 <dialog> 支持较新，Chrome 从 97+ 开始稳定支持，但 ::backdrop 伪元素在旧版 Safari（≤15.4）中不支持，会导致点击阴影区域无法关闭。
关键样式建议直接写死，不要依赖默认：
dialog {
border: none;
padding: 0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
dialog::backdrop {
background-color: rgba(0,0,0,0.5);
}
如果需要兼容老 Safari，得降级方案：用额外 <div class="backdrop"> 手动控制显隐，并同步管理 z-index 和 focus 锁定逻辑——这时候其实已经脱离原生 dialog 的轻量初衷了。
真正用好 <dialog> 的前提是接受它的行为边界：它不是万能弹窗组件，而是为“模态、焦点受限、语义明确”的场景设计的。设置面板恰好符合，但一旦你需要拖拽、最大化、嵌套滚动或复杂动画，就得换方案了。
