jfpedroza
Running LiveView inside a web component with shadow DOM
Hi.
We are considering offering web components to our customers so they can embed parts of our application in their website. I’m exploring using LiveView for that and have found some challenges. I’m aware of LiveState and have tested it, but I want to rule out LiveView first.
I managed to embed a LiveView in another page in a web component without shadow DOM and have it connect to the socket, everything works.
Using web components without shadow DOM has the issue of component styles interfering with the global style and vice versa. So I want to make it work with shadow DOM.
The problem is that then the shadow root is not visible in the JavaScript side of LiveView since it looks up everything
starting from document. I managed to connect the socket and detected the live view by simulating what
liveSocket.connect() does.
component.shadowRoot.querySelectorAll('[data-phx-session]:not([data-phx-parent-id])').forEach(rootEl => {
let view = window.liveSocket.newRootView(rootEl)
view.setHref(window.liveSocket.getHref())
view.join()
if(rootEl.hasAttribute("data-phx-main")){ this.main = view }
});
window.liveSocket.bindTopLevelEvents()
window.liveSocket.socket.connect()
With that, I get the log that says phx-some-id mount: but then it fails in attachTrueDocEl because it tries to find
that ID in document. So, I think explicit support in LiveView is necessary to do this. Maybe keeping in each view
which root to use for lookup, whether document or some shadow root set during the “join” phase.
What do you think? Is that something that could be supported by LiveView? Or maybe there are other technical challenges that complicate things.
Most Liked
adw632
I guess you can do it that way, although it means the page load requires some more round trips before it can display content.
I do think there is a valid use case for this, Phoenix should be able to do SSR for custom elements using the draft Declarative Shadow DOM. I think conditionally rendering in the Heex templates within a template element in the initial render would support hydration of custom elements as per the spec.
I honestly don’t think there is much of a gap to build web components in Elixir with the initial render being regular LiveView and the component is delivered with some elixir transpilation to JS like what Hologram does and this could completely eliminate any need to run node to support server side Javascript rendering and provide a rich UI all in Elixir.
bob
So, I usually just lurk here, but I think I was one of the first to figure out how to build and launch cross-domain LiveView widgets >3 years ago in a production application (fintech space).
The approach I took was a custom element that defined a shadow, and its contents were an iframe. Load your LiveView URL into the iframe. It’s as easy as that. If you need to also have client-side (from the embedding side) interactions, you’ll be using postMessage. Phoenix hooks between your LiveView and your server just work like normal. No hacking LiveView required (but it did lead to a coworker submitting a patch to Phoenix to fix up an issue with private browsing sessions that’s now included).
The CTO even gave a talk showing off my work at ElixirConf — https://youtu.be/DA32q8kd9pA?feature=shared
If I’m understanding what you’re looking for, I would be happy to chat with you more about it if you would like (email/zoom). There’s a number of little things to get right with CSP and whatnot to make the experience smooth and easy for those consuming your widgets/components. I can be reached at my username at my domain.
kokolegorille
Hello and welcome,
I have used web components with Phoenix socket and channels
It is simple because there is a npm phoenix package
https://www.npmjs.com/package/phoenix
It’s probably simpler than using Liveview socket, and can be used with shadow dom
Last Post!
adw632
Yes it would certainly be primarily for regular site use cases as the initial render is important for SSO.
However I can also see use cases that would allow the component author to ship a tiny shim component and dynamically load the content and the full component code on the first render. This would be a nice way to handle seamless server based upgrades.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Error tracking, logs, APM, uptime and cron monitoring in one dev-friendly platform. Find and fix problems before your users notice.
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
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #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, logs, uptime, and Just Enough APM. Built for developers.
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!"