<dialog> 元素需 JavaScript 调用 showModal() 才能显示模态弹窗，不支持自动弹出；必须监听 close 事件并结合 dataset.action 判断用户操作来源，防止重复提交或误删；旧版浏览器需降级处理。
dialog 元素必须配合 JavaScript 才能显示
直接写 <dialog></dialog> 不会自动弹出，它默认是隐藏的（display: none），且没有内置“点击遮罩关闭”或“ESC 关闭”逻辑。必须手动调用 showModal() 方法才能呈现为模态弹窗。
常见错误是只写 HTML 结构却忘了 JS 触发，导致点击删除按钮后什么也不发生。
- 确保按钮绑定事件，例如：
document.getElementById('delete-btn').onclick = () => dialog.showModal() -
showModal()会阻塞页面交互、聚焦到 dialog 内第一个可聚焦元素，并启用 ESC / 点击 backdrop 关闭（现代浏览器默认支持） - 不要用
show()—— 它不模态，不阻止背景操作，也不支持 backdrop 点击关闭
删除确认弹窗里必须有明确的「确认」和「取消」按钮行为
用户点“确定”要执行删除逻辑，点“取消”或按 ESC 应关闭弹窗但不触发删除。关键在于监听 close 事件并区分关闭来源，而不是依赖按钮 click 后立刻删数据。
因为 dialog.close() 被调用时（包括用户点 backdrop、ESC、或你代码里主动调），都会触发 close 事件，但此时你还不知道用户点了哪个按钮。
立即学习“前端免费学习笔记（深入）”；
- 给「确认」按钮加
data-action="confirm"，「取消」按钮加data-action="cancel" - 在按钮 click 中记录操作意图：
dialog.dataset.action = 'confirm' - 在
dialog.addEventListener('close', ...)里检查dialog.dataset.action === 'confirm'再执行真实删除 - 别在「确认」按钮 click 里直接发请求——万一用户快速连点或网络延迟，容易重复提交
IE 和旧版 Safari 不支持 dialog，需检测并降级
<dialog> 在 Chrome 37+、Firefox 98+、Edge 79+、Safari 15.4+ 支持。Safari 15.2–15.3 有 bug（backdrop 点击不关闭），iOS Safari 15.4+ 才稳定。IE 完全不支持。
不检测就上线，会导致老用户看到一个静默的 div，或者布局错乱（因为 dialog 默认有 position: absolute 和 z-index）。
- 用
if (!('showModal' in HTMLDialogElement.prototype))判断原生支持 - 不支持时，可动态插入一个带 class 的
<div class="fallback-dialog">并用 CSS 模拟遮罩与居中 - 避免用 polyfill 库（如 dialog-polyfill），它依赖 MutationObserver 且对表单控件聚焦处理不稳定
dialog 内部表单提交会默认刷新页面，需阻止
如果弹窗里用了 <form> 包裹按钮（比如想用 method="dialog"），注意：只有 <button type="submit" formmethod="dialog"> 或显式 <button formmethod="dialog"> 才能关闭 dialog 而不提交；否则表单仍会触发表单默认提交行为。
更稳妥的做法是不用表单，纯用按钮 + JS。
- 移除
<form>标签，避免意外 submit 事件冒泡 - 所有按钮设
type="button"，防止在某些父容器中被误识别为 submit - 若真要用表单逻辑（如校验），监听
submit事件并立即event.preventDefault() - 注意：Safari 对
formmethod="dialog"支持滞后，16.4 才完全可用，生产环境慎用
close 事件的时机和来源判断——很多人把删除逻辑直接写在「确认」按钮 click 里，结果用户按 ESC 关闭后又点了一次按钮，或者网络慢时重复点击，造成多次删除请求。真正的安全边界在 dialog.close() 调用之后、close 事件触发之前，必须靠状态标记守住。 
