upgrading from Hogan templates to HTML tagged templates does not allow for custom attributes

[srconklin]

🐛 Current behavior

using Hogan.js custom attributes were possible. For example, adding custom click handler syntax to an anchor tag from 3rd party libraries like alpine.js https://alpinejs.dev/directives/on

 instantsearch.widgets.hits({
     item (hit) { 

         return ' <a href="#" @click.prevent="$dispatch('show-modal', { itemno: '${hit.itemno}' })">'
...

Now when upgrading to HTML templates due to Hogan deprecation (https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/?client=html+tagged+templates#upgrade-templates), the following error is thrown:

🔍 Steps to reproduce

follow the upgrade guide to replace them either with safe HTML strings using the provided html tagged template, or JSX templates as described above

Live reproduction

sandbox.dynaprice.com

💭 Expected behavior

allow for custom attributes on dom elements.

Package version

"instantsearch.js": "^4.49.1"

Operating system

Windows 10

Browser

Chrome v. 109.0.5414.74

Code of Conduct

• I agree to follow this project's Code of Conduct

[Haroenv]

For now, a workaround would be using the spec-compliant x-on instead of @. I believe this is because we previously used innerHTML, while now setAttribute is used (and @something isn't a valid attribute)

[srconklin]

For now, a workaround would be using the spec-compliant x-on instead of @. I believe this is because we previously used innerHTML, while now setAttribute is used (and @something isn't a valid attribute)

thanks, will try that

[Haroenv]

We won't be able to find a solution for this unfortunately, as setAttribute is throwing. x-on or onClick=${myFunction} should be used instead.