the new <dialog> element improves accessibility by keeping the keyboard focus inside the dialog

Unfortunately it seems like that the improved focus management works only for the JS api.
As you can see the outer input element is prevented from receiving focus because it is in the background:

document.querySelector("dialog").showModal();

<input name="back">

<dialog><input name="front"></dialog>

Without showModal() the outer input element can be focused although it's in the background.

<input name="back">

<dialog open><input name="front"></dialog>

Is there any way to get the same behavior like showModal() only with html?