Hi there

I’m currently working on an application for personal knowlege managment. We’ve recently added a new feature where you can interactively layout your notes, and decided to go with LiveView for it, which has been working very nicely so far.

However we’ve now added an option to have multiple of those note layout views at the same time on your page, and the user can create them dynamically (the page is a SPA, and we’ve wrapped the code for handling the LiveView into a custom WebComponent).

The custom WebComponent looks roughly like this, and is activated by receiving some HTML via JSON from the server which is then appended to the server:

<div>
  <notes-view>
    <%= live_render .... %>
  </notes_view>
</div>

class NoteView extends HTMLElement {
  connectedCallback() {
     this.__liveSocket = new LiveSocket("/live/view-editor", Socket, { hooks: hooks });
     this.__liveSocket.connect();
  }
}

So everytime the user adds a <notes-view>, we connect a new LiveSocket. However by doing this, the previously connected LiveView reconnects on the new socket, and becomes basically unusable (it’s mount function is called again, and it becomes confused for phx events send from hooks).

Currently I’m a bit lost as how to solve this, I’ve already tried to only connecte one LiveSocket, but then the later LiveViews do not connect at all… Any pointers how this could be done? Thanks a lot already