What Native Elements Already Do

1. 1
   Key event dispatched

   keydown fires on the focused element and bubbles. Everything registered along the path sees it.

   fails by A global key handler cancels the event for its own shortcut and silently disables every button on the page.

2. 2
   Browser synthesises activation

   Because the element has an activation behaviour, the browser dispatches a click event — from the keyboard, with no pointer involved.

   fails by Handling keydown yourself as well, so the action runs twice; or handling only keydown on a div, where no synthesis happens at all.

3. 3
   Click propagates

   Capture down the tree, fire at the target, bubble back up. Delegated listeners on ancestors run here (Event Delegation).

   fails by A delegated handler calling stopPropagation(), which cancels other listeners but not the default action, so half the behaviour survives.

4. 4
   Default action runs

   After dispatch completes, the activation behaviour runs: constraint validation, then submit on the form owner.

   fails by Calling preventDefault() after an await, when this step has already happened (How an Event Is Dispatched).

5. 5
   Constraint validation

   The browser checks every control, blocks submission if any is invalid, and focuses the first invalid one.

   fails by novalidate added to silence native bubbles, with no replacement — validation is now entirely gone rather than restyled (Errors People Can Actually Perceive).

6. 6
   Submit fires

   The submit event fires on the form. This is the one place an application should intervene.

   fails by preventDefault() with a handler that throws, leaving no submission path at all.

A div skips straight from step one to nothing. That is the entire difference, and it is five behaviours deep.

1<button type="button" id="open">Edit profile</button>
2 
3<dialog id="dlg" aria-labelledby="dlg-title">
4  <form method="dialog">
5    <h2 id="dlg-title">Edit profile</h2>
6    <label for="name">Display name</label>
7    <input id="name" name="name" required autocomplete="name">
8    <button value="cancel" formnovalidate>Cancel</button>
9    <button value="save">Save</button>
10  </form>
11</dialog>
12 
13<script>
14  const dlg = document.getElementById('dlg')
15  document.getElementById('open').addEventListener('click', () => dlg.showModal())
16  dlg.addEventListener('close', () => {
17    if (dlg.returnValue === 'save') { /* the only application concern here */ }
18  })
19</script>

method="dialog" closes the dialog on submit and sets returnValue to the activating button's value. formnovalidate on Cancel is what stops the required field from blocking a dismissal. Not written: the focus trap, the focus return, the backdrop, the Escape handler, the inertness of the page behind, and the stacking context.

<div class="acc">
  <div class="acc-head" onclick="toggle()">Shipping details</div>
  <div class="acc-body" style="display:none">...</div>
</div>
<!-- plus: tabindex, role="button", aria-expanded,
     aria-controls, key handling, and state kept in sync -->

<details>
  <summary>Shipping details</summary>
  ...
</details>

The native version is operable during parsing, before any script runs; announces its expanded state without an attribute you have to remember to update; is toggled by the platform keyboard convention; and is opened automatically by find-in-page when a match is inside it. The hand-built version can be brought to parity on the first three with care and cannot reach the fourth at all.