Ability to trigger the modal declaratively

I want to throw in one more idea out there for your consideration. I also use Micromodal.js in my projects and they have this nice little feature that lets you trigger the modal declaratively without any code. It’s explained if you scroll to the third section. Here’s what it could look like with SweetAlert:

<button data-swal-trigger="hello-world-alert">Click me!</button>

<template id='hello-world-alert'>
    <swal-title>Hello world!</swal-title>
    <swal-html>Here I come...</swal-html>
</template>

I’m not familiar with the SweetAlert basecode so I don’t know how hard this would be. I guess you would need a MutationObserver to bind a click event listenr to any tag with the data-swal-trigger attribute.

_Originally posted by @pomartel in https://github.com/sweetalert2/sweetalert2/issues/2112#issuecomment-734835853_

[limonte]

Great advice, thank you @zenflow

I’m also planning to add the attributeName = 'data-swal-trigger' argument to the bindClickHandler() method, so users will be able to do this:

<button data-swal-trigger="hello-world-alert">Click me!</button>

<button data-swal-toast-trigger="hello-world-alert">Click me for a toast!</button>

<template id='hello-world-alert'>
  <swal-title>Hello world!</swal-title>
  <swal-html>Here I come...</swal-html>
</template>

<script>
  Swal.bindClickHandler() // data-swal-trigger will be used

  Swal.mixin({
    toast: true
  }).bindClickHandler('data-swal-toast-trigger')
</script>

[limonte]

Should it be data-swal-template instead of data-swal-trigger, since the value of the attribute is a template id? Or if ergonomics is more important than explicit (& verbose) naming, maybe just data-swal?

<!-- data-swal-trigger -->
<button data-swal-trigger="hello-world-alert">Click me!</button>
<button data-swal-toast-trigger="hello-world-alert">Click me for a toast!</button>

<!-- data-swal-template -->
<button data-swal-template="hello-world-alert">Click me!</button>
<button data-swal-toast-template="hello-world-alert">Click me for a toast!</button>

<!-- data-swal-->
<button data-swal="hello-world-alert">Click me!</button>
<button data-swal-toast="hello-world-alert">Click me for a toast!</button>

My vote goes for data-swal-template 👍