dialog标签默认不渲染，需调用showModal()才激活模态行为；open属性仅控制可见性，不启用遮罩、焦点锁定或Esc响应；Safari存在backdrop事件和渲染兼容问题，需降级处理。
dialog 标签不是“写了就能弹”的组件，它默认不渲染、不显示、不拦截任何交互——必须显式调用 showModal() 才真正激活模态行为，否则页面上什么都不会出现。
为什么写了 <dialog></dialog> 却完全看不到？
这不是 CSS 问题，是它根本没被浏览器“启动”。原生 dialog 默认 display: none，且跳过布局和绘制：连 getBoundingClientRect() 都返回空值，offsetHeight 是 0。
-
open属性只让元素可见，但不启用 backdrop、不锁焦点、不响应 Esc —— 它只是“可见”，不是“模态” -
showModal()才真正触发渲染、加遮罩、禁用背景、聚焦第一个可聚焦子元素 - JS 必须在 DOM 加载完成后执行，否则
document.querySelector('dialog')返回null，调用showModal()报错Cannot read property 'showModal' of null - 别用
dialog.style.display = 'block'或dialog.hidden = false，这会绕过原生焦点管理，Tab 键直接穿透出去
点击灰色遮罩层（backdrop）为什么不关闭？
这不是 bug，是规范明确不支持自动关闭：showModal() 创建的 ::backdrop 默认不可点击，也不冒泡事件到 dialog 元素本身。
- 正确监听方式：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 存在兼容问题：点击 backdrop 时
e.target可能始终是body，需 fallback 到坐标判断（如e.clientX ） - 别写成
dialog.addEventListener('click', () => dialog.close())——这会让点击内部按钮也关闭对话框 -
show()没有 backdrop，此逻辑无效；仅对showModal()启用
<form> 提交后页面刷新，dialog 消失？
因为 <form> 在 <dialog> 内仍按默认行为提交，触发整页 reload —— dialog.close() 根本没机会执行。
- 最简方案：给
<form>加method="dialog"属性，提交后自动关闭并设置dialog.returnValue，不刷新页面 - 需要异步处理（如
fetch）时，必须在submit事件中调用e.preventDefault()，再手动dialog.close() - 别把关闭逻辑写在按钮的
onclick里——用户回车提交会漏掉 - 提交后记得重置表单状态（如
form.reset()），否则下次打开还是上次填的内容
样式难看、居中错位、焦点丢失？这些全得自己补
dialog 几乎没有跨浏览器一致的默认样式：Chrome 给圆角阴影，Firefox 是透明块，Safari 甚至默认不居中，且在父元素有 transform 或 will-change 时可能完全不渲染。
立即学习“前端免费学习笔记（深入）”；
- 强制居中推荐写法：
dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } -
dialog::backdrop样式在 Safari 中支持不全（如background: rgba(0,0,0,0.5)可能失效），建议额外加一层<div class="backdrop">模拟 -
dialog的z-index是浏览器内置的，你写的 CSSz-index不会覆盖它——模态dialog总在顶层，非模态的才受 CSS 层叠影响 - 焦点管理不稳定（尤其 Safari），首次打开可能不聚焦，可用
setTimeout(() => dialog.focus(), 0)强制
