Connect multiple instances of LiveView dynamically after page load

Questions & Help Questions
,
2

Ok, I’ve found the solution and my mistaken assumptions :wink:. I’m not sure if this is the idiomatic way to do this, but it does work at without problems:

  1. Do not open more then one LiveSocket (should have been obvious). Instead create a global LiveSocket and connect that one:

    const __liveSocket = new LiveSocket("/live/view-editor", Socket, { hooks: hooks });
__liveSocket.connect();

  2. When the WebComponent connects, call some functions on the LiveView to join the views manually (This is the part I’m nor sure about. The functions do not really look like they are private, but I guess that could change at anytime):

    connectedCallback() {
    __liveSocket.joinRootViews();
    __liveSocket.detectMainView();
}

    It might be possible to call liveSocket.joinView(...)directly, but I haven’t given that a try.

  3. Once your WebComponent disconnects, destroy the associated view (this will also destroy the process on the server for this view):

    disconnectedCallback() {
    __liveSocket.destroyViewByEl(yourViewElement);
}

And that’s it