标签需调用show()或showModal()才显示；show()为非模态，背景可交互；showModal()为模态，禁用背景、自带遮罩、支持Esc及点击遮罩关闭，但需dialog::backdrop样式生效，且须正确处理焦点与可访问性降级。
dialog 标签不会自动显示，必须调用 show() 或 showModal() 才能看见——写完标签就以为能弹出来，是新手最常踩的坑。
dialog.show() 和 dialog.showModal() 有什么区别
两者都让 dialog 可见，但行为完全不同：
-
show()：非模态，背景仍可点击、滚动、聚焦；适合工具提示、悬浮面板这类不打断用户流程的场景 -
showModal()：模态，自动禁用背景交互、添加半透明 backdrop、支持 Esc 关闭、点击 backdrop 默认关闭（除非 CSS 禁用） - 两者都不改变 DOM 位置，
dialog始终渲染在页面最上层（z-index 最高），但若父容器有overflow: hidden或transform，backdrop 可能被截断
为什么点击 backdrop 没反应，或者 Esc 关不了
不是浏览器 bug，而是没配对关键样式和事件监听：
- 必须手动加
dialog::backdropCSS 才有遮罩效果，否则 backdrop 是透明不可见的（即使showModal()调用了） - 点击 backdrop 关闭，依赖浏览器原生行为，但 Safari 15.6 之前不支持；旧版需降级为
display: none+aria-modal - Esc 关闭是原生能力，但若你在
keydown里preventDefault()了全局事件，就会失效 - 正确监听关闭方式是绑定
close事件，而不是只靠按钮 click：dialog.addEventListener('close', () => { console.log(dialog.returnValue); })
如何安全兼容不支持 dialog 的浏览器
不能只靠 if ('showModal' in HTMLDialogElement.prototype) 就完事，降级逻辑要覆盖语义与可访问性：
立即学习“前端免费学习笔记（深入）”；
- 检测失败时，设
dialog.hidden = true（比style.display = 'none'更语义正确） - 手动加
aria-modal="true"和role="dialog"，并确保弹窗内首个可聚焦元素获得焦点：dialog.querySelector('input, button')?.focus() - 关闭后，焦点必须回到触发按钮（用
button.focus()），否则屏幕阅读器会丢失上下文 - 不要给
dialog外层套pointer-events: none—— 这会让整个弹窗无法聚焦、键盘不可导航
真正难的不是让弹窗“出现”，而是让它在各种设备、各种辅助技术、各种键盘操作路径下，都保持可感知、可操作、可恢复。别只盯着 showModal() 那一行代码，背后那套焦点管理、语义标注、回退逻辑，才是生产环境里最容易翻车的地方。
