autofocus 在 dialog 中不会自动生效，因其仅在页面初始加载时触发；必须手动调用 focus()，推荐在 showModal() 后监听 focusin 事件并立即聚焦目标按钮，同时确保按钮可聚焦、未被禁用或包裹在 inert 容器中。
autofocus 在
直接写 <button autofocus>确认</button> 放在 <dialog> 里，调用 dialog.showModal() 后焦点不会落到它身上。这不是你漏写了属性，而是 HTML 规范明确限定：autofocus 只在页面初始加载时由浏览器解析 HTML 阶段处理一次，后续任何 DOM 显示切换（包括 showModal()、display: block、v-if 切换）都不会重新生效。
必须手动 focus()，且时机很关键
可靠做法是在 showModal() 调用后，立即对目标按钮调用 .focus()，但要注意三点：
- 按钮必须已渲染、未被
disabled、不在inert容器中、也不是<div role="button">这类伪可聚焦元素 - 不能在
showModal()后立刻执行——某些浏览器（尤其是 Safari）有微小延迟，dialog 尚未完全激活，此时.focus()会静默失败 - 推荐用
focusin事件监听，配合{ once: true }：
dialog.showModal();
dialog.addEventListener('focusin', function handler() {
const btn = dialog.querySelector('[data-action="confirm"]');
btn?.focus();
dialog.removeEventListener('focusin', handler);
}, { once: true });
比 setTimeout(() => ..., 0) 更稳定，避免竞态。
按钮不可聚焦的常见静默失效场景
.focus() 不报错也不提示，但就是没反应，往往是因为按钮本身不满足可聚焦条件：
立即学习“前端免费学习笔记（深入）”；
-
<button disabled autofocus>→ 移除disabled，或改用tabindex="-1"+ CSS 控制视觉禁用 - 按钮被包裹在
<div inert>中（某些 polyfill 或框架自动加）→ 检查并移除inert - 用了
<div role="button">→ 改成原生<button>，或显式加tabindex="0" - 按钮在 React/Vue 组件中刚挂载，DOM 还没真正就绪 → 确保 ref 已绑定、v-if 已为 true、useEffect/onMounted 已触发
多弹窗共存时焦点别抢跑
如果页面可能同时存在多个 <dialog>（比如嵌套操作或错误提示叠加），仅靠 focusin 不够——底层弹窗也会触发，导致焦点跳回旧弹窗。
建议给最上层弹窗加标识，只对它内部的首个可聚焦元素聚焦：
dialog.setAttribute('data-modal-layer', 'top');
// 聚焦逻辑只作用于：
document.querySelector('dialog[data-modal-layer="top"] [autofocus], dialog[data-modal-layer="top"] button:not([disabled]):not([hidden]):first-of-type')?.focus();
关闭弹窗时，记得调用 document.activeElement?.blur()，防止焦点残留干扰键盘事件。
真正麻烦的不是怎么写 focus，而是判断“此刻该让谁聚焦”——这个决策点容易被忽略，但直接影响屏幕阅读器用户能否正确进入操作流。
