<button id="button">Open dialog</button>

<dialog id="modal">
  <form action="">
    <small>Try navigating through inputs using TAB key</small>
    <p>

      <label>
          Username
          <input type="text" />
        </label>
    </p>
    <p>
      <label>
          Password
          <input type="password" />
        </label>
    </p>
    <p>

      <label><input type="checkbox" />Remember me</label>
    </p>

    <input type="submit" value="Login" />

  </form>
</dialog>

<input style="opacity:0;" value="This is here just as a hack to keep focus remain inside Codepen's iframe"/>

dialog {
    background-color: rgb(255, 255, 255);
}
dialog[open]:not(:focus-within) {
    background-color: rgb(255, 255, 254);
    transition: background-color 0.01s ease;
}

/* Polyfill for Dialog on FF, Safari etc */
.no-dialog dialog {
  display: none;
}

.no-dialog dialog[open] {
  display: block;
}

var isDialogSupported = true;
if (!window.HTMLDialogElement) {
  document.body.classList.add("no-dialog");
  isDialogSupported = false;
}

button.onclick = () => {
  if (isDialogSupported) {
    modal.showModal();
  } else {
    modal.setAttribute("open", "");
  }
  //   Focus first input when dialog opens
  modal.querySelector("input").focus();
};

modal.addEventListener("transitionend", e => {
  modal.querySelector("input").focus();
});