dialog.close()仅对已打开（open为true）的对话框有效，未显示时调用无效但不报错；需检查open状态再调用，关闭后应手动恢复焦点以保障可访问性。
dialog元素的close()方法必须在打开状态下才能调用
直接调用close()对未显示的<dialog>无效，也不会报错，但后续showModal()或show()仍可正常打开。浏览器只允许对已呈现（即open属性为true）的<dialog>执行关闭操作。
常见错误是：页面加载后立刻调用dialog.close()，此时dialog.open为false，调用无效果。
- 检查状态再调用：
if (dialog.open) dialog.close(); - 绑定
click事件时，确保目标<dialog>已通过showModal()或show()激活 -
close()会触发close事件，但不会触发cancel事件（后者仅由用户按Esc或点击遮罩层触发）
正确绑定关闭按钮的三种常用方式
最稳妥的做法是把关闭逻辑和showModal()调用配对使用，避免状态错位。
<dialog id="myDialog"> <p>内容</p> <button id="closeBtn">关闭</button> </dialog> <button id="openBtn">打开</button>
- 显式调用：
document.getElementById('openBtn').onclick = () => myDialog.showModal(); - 关闭按钮绑定：
document.getElementById('closeBtn').onclick = () => myDialog.close(); - 支持
Esc和点击遮罩关闭：监听close事件即可，无需额外处理——myDialog.addEventListener('close', () => console.log('已关闭'));
注意close()与cancel()的行为差异
close()是主动关闭，不区分关闭来源；cancel()是语义化方法，仅用于模拟用户取消操作（如按Esc），它会触发cancel事件而非close事件，且在某些旧版 Chromium 中可能未实现。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一用
close()，兼容性更好，Chrome 97+、Firefox 99+、Safari 15.4+ 均支持 -
cancel()调用后仍会触发close事件（Safari 16.4+起），但行为不一致，不建议混用 - 若需区分“用户取消”和“程序关闭”，应自行维护状态标记，不要依赖事件类型
modal dialog关闭后焦点不会自动恢复
这是最容易被忽略的可访问性问题：showModal()会将焦点限制在对话框内，但close()后焦点不会回到触发按钮或上一个活跃元素，可能导致键盘用户迷失。
- 手动保存并恢复焦点：
const $trigger = document.activeElement; myDialog.showModal(); /* ... */ myDialog.close(); $trigger?.focus(); - 更健壮的做法是监听
close事件并在其中恢复：myDialog.addEventListener('close', () => $trigger?.focus()); - 如果触发元素已被移除或失效，需 fallback 到
document.body或页面主区域
