Prevent HTML dialog from grabbing focus

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>.

Is there an easy way to prevent a <dialog> element from grabbing the focus or would this be bad practice?

Yes, this would be a bad practice. You should not do this.

The reason the dialog element focuses itself or its first interactive child element when opened is because focus management is part of the accessibility requirements / specification for the dialog user interface pattern. Changing the expected behavior will likely cause confusion and usability problems for people who use assistive technology such as screen reader software and/or people who do not use a mouse.

Alternatively you could use the PopOver API which does not move focus to the pop over element by default.

const closeButton = document.querySelector("button.close");
const popover = document.querySelector("[popover]");

closeButton.addEventListener("click", function() {
  popover.hidePopover();
});

button:focus-visible {
  outline: 3px solid blue;
}

[popover] {
  padding: 12px;
}

<button class="open" popovertarget="some-popover">Open Pop Over</button>

<aside id="some-popover" popover>
  <p>I am a popover</p>
  <button class="close">Close</button>
</aside>