防止HTML对话框抓取焦点

Question

<dialog>元素一旦打开就会收到焦点，我知道这是预期的行为。但是，我考虑使用<dialog>元素在窗口顶部显示一个简短的通知，该通知将在短时间后滑动。由于这个通知相当不引人注目的行为，我对对话框在它显示的时候抓住焦点有一种奇怪的感觉，特别是当它把它放回最后一个有焦点的元素时。

为了说明我的意思，请看这个简短的例子(我将按钮的焦点样式设置为红色以使其明显)。如果按钮能在对话框打开时保持焦点，那就太好了:

const myDialog = document.getElementById('notice');
const myButton = document.getElementById('button');
myButton.focus();
myButton.addEventListener('click', (e) => {
e.preventDefault();
myDialog.show();
const hideDialog = setTimeout(() => {
myDialog.close();
clearTimeout(hideDialog);
}, 5000);
});

#button:focus {
outline: 5px solid red;
}
#notice {
position: absolute;
margin: 0 auto auto;
top: 0;
transition: top 1s ease;
}
#notice:not([open]){
display: block;
top: -100%
}

<button id="button">Click me to show notice</button>
<dialog id="notice">Just a short notice</dialog>

是否有一种简单的方法来防止<dialog>元素抓住焦点，或者这是不好的做法?也许我应该使用<div>，而不是使用<dialog>元素?我不太确定什么是最好的，尤其是从可访问性的角度来看。

我还想到，你经常可以通过CSS或JavaScript改变元素的大部分行为和外观。所以，我想知道你是否能把<dialog>的行为改变成普通<div>的行为。

Answer 1

在打开对话框之前将其惰性属性设置为true，然后将其设置为false。这将阻止任何自动对焦行为。

my_dialog.inert = true;
my_dialog.show();
my_dialog.inert = false;

Answer 2

切换'open'属性可能是处理它的方法(而不是使用.show()/.close())。但是，请阅读MDN文档以了解这种方法的后果。