carlosescri
LiveView DOM patching in webcomponents with slotted content
Hi all!
I’ve been working on some RAW (no framework) web components for one of our projects to see how well they behave with Phoenix LiveView.
At the time I have:
- Custom tooltips (no problem)
- Phone Input with country dropdown picker (no problem), Form Associated Custom Element (FACE), so it works with forms as any other input.
- Custom Select (with search and a slot to put custom HTML nodes). FACE too.
I had some problems with the slotted elements in the custom select because they were not patched by morphdom.
With a bit of help from Claude y proposed a fix in the live view repo.
You can get more details here:
If any of you is interested on this topic because you suffered from this problem too, would be great if you can give a try so @steffend can get some feedback because this is actually a bit tricky.
I encourage you to take a look at the PR. It’s up to date to 1.2.6 version of LV and it has some tests. More details in the PR.
Thank you for your time.
Popular in Thoughts On...
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
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
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Enabling companies to succeed by building software people love.
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!"