dialog元素默认不显示，必须调用show()或showModal()才能激活；仅写标签或设CSS无效，showModal()启用完整模态行为，show()仅为非模态浮层。
dialog 元素默认不显示，必须显式调用 show() 或 showModal()
直接写 <dialog></dialog> 不会渲染在页面上，连 display: block 都没用。浏览器把它的初始 display 设为 none，且不响应 CSS 的 display 覆盖（除非用 !important 强行破环，但不推荐）。正确做法是通过 JS 控制状态：
-
myDialog.show()：显示非模态对话框（背景可交互） -
myDialog.showModal()：显示模态对话框（自动置顶、背景灰暗、Esc 关闭、聚焦锁定） -
myDialog.close()触发close事件，可用于清理逻辑
自定义样式必须重置 backdrop 和内部 box 的默认行为
Chrome/Firefox 对 <dialog> 有强默认样式，比如 margin: 0 auto、position: absolute、top: 0 等，导致居中异常或无法铺满。更关键的是 backdrop（遮罩层）不可直接选中 —— 它是伪元素，需用 dialog::backdrop 选择器：
- 不加
dialog::backdrop，遮罩透明度、颜色、动画全失效 -
dialog本身默认border: none，圆角、阴影、padding 都得手动设 - 若用
transform: scale()做入场动画，要配合transition: transform，且确保父容器overflow: hidden不裁剪
dialog {
padding: 24px;
border-radius: 8px;
border: 1px solid #e0e0e0;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
max-width: 90vw;
}
dialog::backdrop {
background-color: rgba(0,0,0,0.5);
animation: fade-in 0.2s ease-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
关闭按钮必须显式绑定 close()，不能只靠点击 backdrop
虽然 showModal() 后点击 backdrop 默认关闭 dialog，但这个行为不可靠：Firefox 旧版本不支持，Safari 直到 16.4 才完整支持 backdrop 点击关闭；而且用户可能禁用 backdrop 点击（比如用 pointer-events: none 做自定义遮罩逻辑）。安全做法是每个对话框都提供明确的关闭控件：
- 给关闭按钮加
type="button"，避免表单提交干扰 - 监听按钮 click 并调用
dialog.close()，不要用remove()或hidden = true - 如果 dialog 内有表单，
Enter提交时也应主动调用close()，而非依赖默认行为
无障碍和焦点管理容易被忽略，但影响实际可用性
原生 <dialog> 本应自动处理焦点锁定和 aria-modal="true"，但实测中 Safari 仍存在焦点逃逸问题，且首次打开时焦点未必落在第一个可聚焦元素上。必须手动补足：
立即学习“前端免费学习笔记（深入）”；
- 打开前用
dialog.addEventListener('aftertoggle', ...)检查open属性变化（注意：不是toggle事件） - 打开后立即
dialog.querySelector('input, button, [href]')?.focus() - 关闭后手动将焦点切回触发按钮（否则键盘用户会迷失在页面顶部）
- 不要删掉
role="dialog"—— 尽管原生已内置，但部分读屏器仍依赖它
真正麻烦的不是写样式，而是让 dialog 在所有主流浏览器里“表现一致”：Safari 的 backdrop 动画卡顿、Firefox 的 focus ring 偏移、Chrome 的 scrollbar-gutter 导致宽度抖动……这些细节不压测根本发现不了。
