When using Alpine.js in a Drupal site with the Storybook module, the shorthand syntax for event bindings such as @click (which is equivalent to x-on:click) does not work in Storybook.
Although Alpine.js works fine in the actual site, when rendering a component via the Storybook module, the @click attribute is stripped from the markup. This results in broken interactivity for Alpine components inside Storybook.
This is likely due to sanitization or HTML processing (possibly during Twig-to-HTML rendering or internal serialization) that removes non-standard attribute syntax starting with @.
Use Alpine.js in your Drupal theme or module.
Create a Storybook component using the following template:
<div x-data="{ open: false }">
<button @click="open = !open">Toggle</button>
<p x-show="open">Visible when open is true</p>
</div>
Render the component via Storybook.
Inspect the output in the browser dev tools.
Active
1.0
Miscellaneous