<dialog> requiring javascript

[Link2Twenty]

As it stands the <dialog> element requires javascript. Would it make sense to have an attribute, similar to the for attribute in labels, that allows you to make a button a toggle or opener for a <dialog>?

Currently, I do something like this

<button data-for-dialog="testDialog" open>Open dialog</button>
<dialog id="testDialog">
  <h1>An example of a native Dialog element</h1>
  <p>This is a dialog box and, believe it or not, it's built into HTML, sure we needed some javascript to open it but hey, it's a start.</p>
  <button data-for-dialog="testDialog" close>Close dialog</button>
</dialog>

and then have some JS like so

const dialogTriggers = document.querySelectorAll(`[data-for-dialog]`);

for (let trigger of dialogTriggers) {
  const dialog = document.getElementById(trigger.dataset.forDialog);
  trigger.addEventListener('click', () => {
    trigger.hasAttribute('open') && dialog.showModal();
    trigger.hasAttribute('close') && dialog.close();
  });
}

I think it would be helpful to be able to do something like this and have it work.

<button for-dialog="testDialog" open>Open dialog</button>
<dialog modal id="testDialog">
  <h1>An example of a native Dialog element</h1>
  <p>This is a dialog box and, believe it or not, it's built into HTML, sure we needed some javascript to open it but hey, it's a start.</p>
  <button for-dialog="testDialog" close>Close dialog</button>
</dialog>

We were discussing the element over on dev.to
Thanks for your time 🙂

[domenic]

Duplicate of #3567; let's consolidate discussion there.