如何阻止HTML <dialog>元素打开时自动抢占焦点

能否阻止<dialog>打开时抢占焦点？ #

没有原生支持的简便方法。自动抢夺焦点、关闭时返还焦点是HTML标准中对<dialog>元素的硬性规定：不管是调用show()打开非模态对话框，还是调用showModal()打开模态对话框，浏览器都会按规范将焦点移动到对话框内部，不存在可以关闭这个行为的属性或API。
如果非要在现有代码上打补丁，可以在myDialog.show()调用后立刻手动执行myButton.focus()把焦点切回去，但这种写法有明显缺陷：屏幕阅读器等辅助工具依然会先捕捉到焦点跳转到对话框的事件，再感知到焦点跳回，依然会产生读屏打断；另外如果后续浏览器调整了焦点触发的事件时序，这种补丁式写法很容易失效。
顺带提一句，你示例里给#notice:not([open])写display: block的写法本身就有问题：未打开的<dialog>浏览器默认设置为display: none，强制改display会让隐藏状态的对话框依然能被辅助技术感知，反而制造无障碍bug。 #

修改<dialog>默认焦点行为是不是不良实践？ #

是。<dialog>的核心设计目标就是承载需要用户关注、需要用户交互的对话框类组件，自动抢焦点、内置焦点陷阱、关闭返还焦点这些你觉得“碍事”的行为，根本不是bug，而是它为对话框场景做的核心无障碍适配。强行改掉这些核心行为，相当于把设计来拧螺丝的螺丝刀当撬棍用，不是完全不能用，但完全浪费了原生元素的内置价值，还会埋下一堆兼容和无障碍的坑。 #

顶部自动消失的短时提示场景该用什么实现？ #

直接用普通元素（<div>即可）搭配对应ARIA属性实现，完全没必要用<dialog>。
你说的这种非侵入式、不需要用户操作、停留后自动消失的提示属于toast/notice类组件，它的交互逻辑从根上就和<dialog>的设计目标相反：这类组件本来就不应该抢焦点。正确的无障碍实现逻辑很简单：

• 给提示容器加role="status"（高优先级的错误类提示可以用role="alert"），这个角色默认自带aria-live="polite"属性，屏幕阅读器会在用户当前操作的间隙自动朗读提示内容，不会打断用户正在进行的输入、浏览操作
• 不需要做任何焦点管理，因为用户不需要和这类短时提示交互
• 动画效果靠class切换控制transform/opacity实现即可，不要靠操作open属性硬改dialog的默认显隐逻辑

能不能把<dialog>的交互改得和普通<div>完全一致？ #

理论上你可以靠大量JS事件监听、CSS覆盖实现：比如监听dialog的打开事件立刻把焦点切回原元素、移除内置的焦点陷阱逻辑、覆盖所有默认样式、抹除浏览器默认给dialog绑定的ARIA映射，但这纯属于脱裤子放屁。你为了抹除dialog所有原生特性写的兼容代码，比直接写个带正确ARIA属性的div多好几倍，还得跟着浏览器版本迭代反复测兼容性，没有任何实际收益。 #

参考实现代码 #

<style>
#button:focus {
  outline: 5px solid red;
}

#notice {
  position: fixed;
  margin: 0 auto;
  left: 50%;
  transform: translate(-50%, 0);
  top: 0;
  transition: transform 1s ease;
  padding: 12px 20px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

#notice.hidden {
  transform: translate(-50%, -100%);
}
</style>

<button id="button">Click me to show notice</button>
<div id="notice" class="hidden" role="status">Just a short notice</div>

<script>
const myNotice = document.getElementById('notice');
const myButton = document.getElementById('button');

myButton.focus();

myButton.addEventListener('click', (e) => {
  e.preventDefault();
  myNotice.classList.remove('hidden');
  const hideNotice = setTimeout(() => {
    myNotice.classList.add('hidden');
    clearTimeout(hideNotice);
  }, 5000);
});
</script>

这个实现完全满足你的需求：提示弹出期间按钮会持续持有焦点，不会打断用户操作流，屏幕阅读器可以正确识别提示内容，滑入滑出动画正常工作，也没有额外的兼容负担。 #

内容的提问来源于stack exchange，提问作者Jasper Habicht