Alpine dropdown component has unsupported attributes in LiveView 0.18

Hi all,

I have a Phoenix component for dropdown menus based on Dropdown Component — Alpine.js that works fine with Live View 0.17 but is not working with Live View 0.18, because the HTMLEngine complains about unsupported attributes like :aria-expanded, :aria-controls, and :id.

You can find the complete code on the Alpine page linked above, here’s an excerpt:


The W3C Validator certainly doesn’t like those attributes but it doesn’t like others like x-on:click either, which Phoenix HTML does not complain about.

Should these attributes be accepted? Is there a way to bypass this validation?

1 Like

With 0.18 you afaik need to use the longform alpine attributes x-bind/…, which you can whitelist by prefix.


Thank you!

Using the longform attributes like x-bind:aria-expanded fixed the issue.

Do you think this should also work for the :keys in a x-for iteration?

From the example in for — Alpine.js could we then use x-bind:key="" ?

I’d imagine so, but I’ve never used alpine in depth.

1 Like

Thanks, yes, from the docs it looks like : is just the shorthand for x-bind