Is it possible to change <wa-dialog> to not need JS and do not bind to sibling element?

[HovKlan-DH]

<wa-dialog> is for sure is one of these need-to-use features on a web page, so I am trying to see how I can use it.

I think I do understand how to implement it, but I also find it a little not-optimal when writing the code for it.
I am using this code from the documentation, though I changed it slightly with an additional button:

<wa-dialog label="Dialog" light-dismiss with-header with-footer class="dialog-light-dismiss">
    This dialog will close when you click on the overlay.
    <wa-button slot="footer" variant="brand" data-dialog="close" appearance="outlined">Close</wa-button>
    <wa-button slot="footer" variant="danger" data-dialog="save">Save</wa-button>
</wa-dialog>
<wa-button>Open dialog</wa-button>
<script>
    const dialog = document.querySelector(".dialog-light-dismiss");
    const openButton2 = dialog.nextElementSibling;
    openButton2.addEventListener("click", () => dialog.open = true);
</script>

Two issues with this:

(1)
To not clutter my code base, then ideally I want to gather all modals/popups elsewhere, as I then have them easy to change one place, but with the current implementation, then it seems to rely on the button to be the next sibling? Would it not be possible to divide this, so I can have all dialogs placed e.g. at bottom of my code base?

(2)
Wouldn't it be possible to handle the Javascript natively from the library? I would of course need to somehow bind the <wa-dialog> to the <wa-button> (or any other HTML element), but it could reduce the complexity if not having to deal with the "open dialog" method in JS.

[claviska]

We've been discussing an API to enable this through a data attribute, like this:

<wa-dialog id="about">
  About this website
</wa-dialog>

<button data-dialog="open about">
  Open
</button>

The syntax is data-dialog="<action> <id>". And when a cloe button is inside a dialog, the ID becomes optional.

<wa-dialog id="about">
  About this website

  <button data-dialog="close">
    Close
  </button>
</wa-dialog>

This syntax could easily be adapted to other elements that require similar interactions.

@HovKlan-DH would such a syntax work for you?

[HovKlan-DH]

For me this looks like a much better solution, and no JS is needed - this would be great 👍

I would though vote for <button data-dialog="about:open"> as ID is most important and then action afterwards (and no spacing between as this is just weird)? 😁

[claviska]

Since a command is always required (you would never just pass an ID, for example), the order allows us to make the ID optional in certain cases (e.g. when the component is inside the dialog) without having to compare actions to IDs (which could conflict).

The space follows the pattern used by DOMTokenList, which classes and CSS parts use internally: class="a b c"

While a colon would also work as a delimiter, we're trying to keep things aligned to the platform instead of creating entirely unfamiliar DSLs :)

[HovKlan-DH]

You have as always good reasoning and the more consistent this is towards other patterns or standards, the better.

Again, documentation and especially copy/paste examples are key to smoothen the experience 😁