alpine.js with Zope Page Templates

Question

When using alpine.js directives containing a colon (like x-on:click or :class) in a Zope Page Template, I get a an error like builtins.KeyError 'Undefined namespace prefix: x-on.'.

Are ZPT and alpine.js fundementally incompatible or is there a workaround?

Maybe it is possible to exclude some namespaces to be parsed or to add a "dummy" namespace in site.zcml? If so, how is it done?

Answer 1

After having done some more research, it seems to me that creating new namespaces would go way beyond just configuring the site.zcml, so this doesn't seem to be an option.

An easy solution would be to use tal:attributes to write the problematic directives:

<button tal:attributes="x-on:click string:alert()">Alert</button>