dialog 默认不显示，需显式调用 showmodal() 才呈现；必须已挂载 dom、重置样式、处理无障碍，且 firefox 不支持 ::backdrop。
dialog 标签不是“写完就弹”的组件，它默认不渲染、无交互、必须用 JS 显式调用 showModal() 或 show() 才能出现。直接写在 HTML 里却不调用方法，等于没写。
为什么 dialog 写了但不显示？
浏览器对 dialog 的处理是“惰性”的：DOM 中存在 ≠ 可见 ≠ 可交互。它初始状态就是 display: none，且不会响应点击、focus 或 CSS visibility 切换。
- 必须确保元素已挂载到 DOM（比如
document.body.appendChild(dialog)），再调用showModal() - 不能对未连接的
dialog调用方法，否则抛错Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document. -
show()不锁背景、不捕获焦点、Esc 不关闭；只有showModal()才具备真正模态行为 - Safari 15.4+ 和 Chrome 支持
::backdrop，Firefox 当前仍不支持该伪元素
dialog 的样式必须重置，不能依赖默认
Chrome 给 dialog 加了隐式 margin、border、padding，Safari 表现完全不同，甚至可能居中失败或宽度塌缩。不手动覆盖，上线后大概率在某个浏览器里错位或溢出。
- 至少设置
width、max-width、margin（推荐margin: 2rem auto） - 显式声明
border、border-radius、padding，否则不同浏览器渲染差异极大 -
::backdrop只在showModal()时生效，且无法用 JS 操作其 DOM（它是伪元素，不可遍历） - 若需兼容 Firefox 或旧 Safari，得额外加一层自定义遮罩
<div class="dialog-overlay"></div>并手动控制显隐
表格行点击触发模态框时，数据怎么安全传入？
常见错误是把整行数据塞进 data-* 属性再 JSON.stringify，结果遇到引号、换行、特殊字符直接破坏 HTML 结构。更稳的方式是绑定事件时从 DOM 上实时提取，不依赖字符串序列化。
- 用事件委托监听
tbody，判断event.target.closest('tr')获取当前行 - 从
tr的dataset读取结构化字段，如tr.dataset.userId、tr.dataset.status - 避免把长文本、HTML 片段、对象直接塞进
data-；需要富内容时改用fetch按需加载 - 关闭模态框后，记得调用
dialog.close()，否则 Safari 下再次showModal()会报错The element is already open.
最易被忽略的一点：键盘无障碍支持不是“锦上添花”。没处理 Escape 关闭、没用 autofocus 锁定首输入框、没设 aria-modal="true"，屏幕阅读器用户就卡在背景页里出不来——而这些在 dialog 上不是自动的，全得手写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
