Why do camel-case events not work when using Alpine.js?

[danielniccoli]

I am using both, HTMX and Alpine.js. I added hx-on:htmx:afterSwap="console.log('boop')" to an element and it doesn't work. When replacing the camel-case with kebap-case hx-on:htmx:after-swap="console.log('boop')" the event is now handled as expected.

I understand that both events are always fired. And that AlpineJS requires kebap-case ("This facilitates interoperability with other libraries. Alpine.js, for example, requires kebab case."). But I'm using HTMX's event handler (hx-on) and not Alpine.js' (x-on). So why does the HTMX event handler not handle the afterSwap event?

Is this behaviour expected?

[i0Ta07]

One gotcha to note is that DOM attributes do not preserve case. This means, unfortunately, an attribute like hx-on:htmx:beforeRequest will not work, because the DOM lowercases the attribute names. Fortunately, htmx supports both camel case event names and also kebab-case event names, so you can use hx-on:htmx:before-request instead.

Read https://htmx.org/attributes/hx-on/