`htmx:abort` not working on elements inside Shadow DOM

[colececil]

I'm using htmx v2.0.6, and htmx:abort doesn't seem to be working on elements inside the Shadow DOM. This is the case both with directly using htmx.trigger(element, 'htmx:abort') and with using hx-sync (which looks to be using htmx:abort behind the scenes).

Looking at the source code, https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L5098 seems to be the only place listening for that event, and it's doing so directly on body, so I'm guessing maybe the htmx:abort events dispatched from Shadow DOM elements just aren't being picked up by any event listener?

[MichaelWest22]

all events that htmx triggers use (bubbles: true, composed: true) which is designed to bubble up to body from inside Shadow DOM elements even though events by default may not. testing this manually and It does bubble up just fine to body. However the htmx abort function uses:

    body.addEventListener('htmx:abort', function(evt) {
      const target = evt.target
      const internalData = getInternalData(target)
      if (internalData && internalData.xhr) {
        internalData.xhr.abort()
      }
    })

And evt.target is not the target of the event inside the shadow DOM and is actually always the web component host element as the browser re-targets all events from inside shadow DOM to the host element for better encapsulation. I think htmx would need to use evt.detail.elt instead to find the real target for both the normal and shadow DOM case

Are you able to make a download of the htmx.js file in your project and try changing this one line to

const target = evt.detail.elt

To test if the abort events start working for you?

[MichaelWest22]

Able to reproduce the issue easily in shadow dom tests so created a PR to fix the issue

[colececil]

@MichaelWest22 Thanks for your work on this! Sorry I missed your earlier question. I just tried out your change with my project, and I can confirm it fixes my issue!