标签不支持自动关闭，必须用javascript手动实现倒计时与close()调用，并处理焦点恢复和浏览器兼容性降级。
dialog 标签本身不支持自动关闭，必须手动控制
HTML <dialog></dialog> 是原生模态组件，但它是“被动型”元素——没有内置倒计时、自动关闭或定时器能力。所有时间逻辑（比如 5 秒后关闭）必须由 JavaScript 显式实现，否则弹窗会一直挂着。
常见错误是只写 <dialog open></dialog> 就以为能自动消失，结果用户卡在半透明遮罩里动不了。记住：open 属性只是控制初始可见状态，和生命周期无关。
- 必须用
dialog.showModal()触发模态行为（否则无 backdrop、Tab 键不锁定） - 关闭只能调用
dialog.close()，不能靠删open属性或 display:none - 倒计时需用
setTimeout()或setInterval()配合close()
倒计时显示要手动更新 innerText，dialog 不提供内置计数器
<dialog></dialog> 里放一个 <span id="countdown"></span> 是最稳妥的做法。浏览器不会帮你渲染剩余秒数，你得自己读取当前值、减 1、再写回去。
注意：不要用 innerText 更新时触发重排导致闪烁（虽然一般不明显），更别用 innerHTML 拼接 HTML——除非你真需要富文本，否则纯文本更新更快更安全。
- 初始化倒计时用
countdownEl.textContent = "5" - 每次递减后立即赋值，例如
countdownEl.textContent = String(secondsLeft) - 倒计时归零前调用
dialog.close()，并记得clearTimeout()防止内存泄漏
关闭后需手动处理 focus 恢复，否则键盘操作会失效
用户习惯是关闭弹窗后焦点回到触发按钮或页面主区域。<dialog></dialog> 关闭时不会自动还原焦点，若不干预，Tab 键可能卡在空白处或跳到地址栏。
尤其当弹窗由 <button onclick="showDialog()"></button> 打开时，关掉后应把焦点设回该按钮，否则可访问性（a11y）直接不达标。
- 记录触发元素：
const triggerBtn = event.target; triggerBtn.focus(); - 或 fallback 到
document.body：document.body.focus() - 在
dialog.addEventListener('close', ...)里做恢复，不是在setTimeout里
IE 和旧版 Safari 不支持 dialog，必须加降级方案
<dialog></dialog> 在 Safari ≤ 15.4、所有 IE 版本中完全不可用，表现为元素渲染但无模态遮罩、无 showModal() 方法、调用即报 TypeError: dialog.showModal is not a function。
不能只靠 if ('showModal' in HTMLDialogElement.prototype) 判断，因为 Safari 15.4 虽有该方法但行为异常（比如 backdrop 点击不关闭）。稳妥做法是检查特性和实际行为。
- 简单降级：用
div+ CSS 实现类 dialog 样式，并手动管理aria-modal和 focus 锁 - 检测失败时，直接
console.warn('dialog not supported, falling back to div') - 避免在不支持环境里调用
showModal()，否则脚本中断
真正麻烦的不是写倒计时，而是确保关闭后焦点回到合理位置、屏幕阅读器能感知状态变化、旧浏览器有可用备选。这些细节漏掉一个，用户就可能卡住几秒钟——而那几秒，足够让人关掉网页了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
