jaimeiniesta
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:
<button
x-ref="button"
x-on:click="toggle()"
:aria-expanded="open"
:aria-controls="$id('dropdown-button')"
type="button"
>
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?
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #blog-post
- #elixir-ls
- #ai
- #elixirconf-us
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Bringing learning, work and compliance together since 1987.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 5- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
LostKobrakai
With 0.18 you afaik need to use the longform alpine attributes
x-bind/…, which you can whitelist by prefix.jaimeiniesta
Thank you!
Using the longform attributes like
x-bind:aria-expandedfixed the issue.jaimeiniesta
Do you think this should also work for the
:keysin ax-foriteration?From the example in for — Alpine.js could we then use
x-bind:key="color.id"?LostKobrakai
I’d imagine so, but I’ve never used alpine in depth.
jaimeiniesta
Thanks, yes, from the docs it looks like
:is just the shorthand forx-bind