The <dialog> element will receive focus once it is opened and I know that this is the intended behavior. However, I thought about using a <dialog> element to show a short notice at the top of the window which will slide away after a short while. Because of the quite unobstrusive behavior of this notice, I have an odd feeling about the dialog grabbing the focus during the time it shows up, especially when it gives it back to the last element that had focus.

To illustrate what I mean, see this short example (I styled the focus of the button red to make it obvious). It would be nice if the button would keep the focus for the time the dialog is open:

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>

Is there an easy way to prevent a <dialog> element from grabbing the focus or would this be bad practice? Maybe I should rather use a <div> for this and not use a <dialog> element at all? I am not quite sure what would be best, especially from an accessibility point of view.

It also came to my mind that you often can change most of the behavior and appearance of elements via CSS or JavaScript. So, I was wandering if you could essentially change the behavior of a <dialog> to that of a regular <div>.