dialog 必须调用 showmodal() 才能实现完整模态效果；需确保 dom 就绪、重置样式、显式设置 backdrop、处理关闭事件与焦点，并避免父级 css 干扰。
dialog 标签不会自动显示，必须调用 showModal() 才能真正弹出模态框；光写标签、加 open 属性或用 show() 都达不到“锁背景+Esc关闭+焦点管理”的效果。
确保 DOM 就绪后再调用 showModal()
脚本执行早于 dialog 元素挂载到 DOM 时，document.querySelector('dialog') 会返回 null，导致 Cannot read property 'showModal' of null 报错。
- 把调用逻辑放在
DOMContentLoaded事件里，或绑定在用户触发的点击事件中（如按钮onclick） - 避免在
中立即执行 JS，尤其不要在<script></script>标签里直接调用showModal() - 检查元素是否真被选中：
console.log(dialog)看是否为HTMLDialogElement实例，而不是null
样式重置是必须步骤，不是可选项
不同浏览器对 dialog 的默认 margin、padding、border、圆角差异极大——Chrome 默认有 16px 外边距，Safari 可能不渲染圆角甚至偏移，不重置会导致布局错乱或内容被裁剪。
- 至少设置：
dialog { margin: 0; padding: 1em; border: none; border-radius: 8px; background: #fff; } -
dialog::backdrop必须显式声明背景色，否则可能全黑或不可见：dialog::backdrop { background-color: rgba(0,0,0,0.6); } - 移动端加
max-width: 90vw; max-height: 90vh;防止溢出视口 - 别依赖父容器的字体/颜色继承，
dialog内部务必声明color和background
关闭逻辑不能只靠按钮点击
close() 是唯一可靠关闭方式，但用户还可能按 Esc 或点遮罩（showModal() 下），只监听按钮 click 会漏掉这些路径。
- 统一监听
close事件处理后续逻辑：dialog.addEventListener('close', () => { /* 清理、重置表单、恢复焦点 */ }) - 想获取关闭原因？读
dialog.returnValue—— 但注意：Safari（截至 v17.6）始终返回空字符串，不能依赖它传值 - 关闭后焦点不会自动回到触发按钮，需手动
triggerBtn.focus()，否则键盘用户卡死 - 禁止在表单提交中写
event.preventDefault()，否则method="dialog"的自动关闭行为会被拦截
多个 dialog 共存时，别用 querySelector 硬编码
document.querySelector('dialog') 永远只返回第一个，其余弹窗点击都会操作同一个元素。
- 用
querySelectorAll('dialog')获取全部，再遍历绑定事件 - 更稳妥的是按结构关联：比如让每个触发按钮的
data-target="#dialog-1"，再用document.querySelector(btn.dataset.target)动态取对应dialog - 避免把所有
dialog嵌套在同一个父容器里——Safari 对非body直接子级的::backdrop渲染不稳定
最易被忽略的一点：你写的 dialog 标签本身没问题，但只要父级有 transform、will-change 或 overflow: hidden，弹窗就可能偏移、被裁剪、甚至完全不可见——这不是 JS 错，是 CSS 定位层级在捣鬼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
