Liveview replacing parent of nested content

I only want to update the value of the inner h1, however liveview is replacing the whole nested structure. JS acts on the outer div to change display. How do I prevent liveview from resetting the whole structure?

EDIT: A live component cannot be used, unless is can be added conditionally when the template is not live.

<div id="waiting-overlay">
  <div style="position: relative">
    <h1 id="waiting-text" phx-update="replace">
      <%= @waiting_text %>
    </h1>
  </div>
</div>
  def handle_info(:waiting_text, socket) do
    Process.send_after(self(), :waiting_text, 5_000)
    
    new_content = "Updated content at #{DateTime.utc_now()}"
    {:noreply, assign(socket, waiting_text: new_content)}
  end

LiveView controls the state of the DOM. You should use a hook if you want to have javascript work within a live view controlled area so that the changes you want to do in JS can be reapplied after each morphdom invocation.

ty :slight_smile: Why is it controlling and area larger than defined? I only want it to update <%= @waiting_text %> or "waiting-text" and nothing beyond it… the granularity does not exist?

The area it’s defined is everything in the live layout, not just the part inside of <%= %>. It’s a “live view” not just a dynamic spot on the page. The whole view is controlled by morphdom. This allows the server to operate as the source of truth on what is shown to the user.

So Im left with reapplying JS? Thats just wasteful… there should be degrees of strictness, or more granular control over effected areas

I would recommend reading the guides on JavaScript interoperability — Phoenix LiveView v0.20.4. That’s the official answer on the kind of stuff you’re trying to do.