<script>
const trigger = document.querySelector('#demo-dialog-open');
const dialog = document.querySelector('#demo-dialog');
trigger.addEventListener('click', () => {
dialog.show();
});
</script>
<button id="demo-dialog-open">Open</button>
<dialog id="demo-dialog">
<h3>Login</h3>
<form method="dialog">
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button type="submit">Login</button>
</form>
</dialog>