← Today I Learned

Load modal content when a Shoelace dialog opens

This is pretty idiosyncratic to htmx and Shoelace, but it’s a neat pattern so I’m documenting it here.

htmx lets you make an HTTP request in response to an event and insert it elsewhere into the DOM. Shoelace’s Dialog component fires an sl-show event when the dialog opens. These can be combined to automatically load modal content when the modal opens:

<sl-dialog hx-get="/modal/content/" hx-trigger="sl-show"></sl-dialog>

If parts of the modal don’t need to be loaded via HTTP — for example, the title — hx-target can be used to replace only the modal content:

<sl-dialog hx-get="/modal/content/" hx-trigger="sl-show" hx-target="find .content">
  <span slot="label">My Modal</span>
  <div class="content"></div>
</sl-dialog>