diff --git a/CHANGELOG.md b/CHANGELOG.md
index 554378f..5ebab36 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,23 @@ All notable changes to @livetemplate/client will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- `lvt-preserve` attribute: morphdom escape hatch that skips an element and its subtree entirely during diff (equivalent to Phoenix LiveView's `phx-update="ignore"`). Checked on `toEl` so the server retains authority to remove it.
+- `lvt-preserve-attrs` attribute: morphdom escape hatch that preserves user-managed attributes (e.g. `open` on `<details>`) while still diffing children. Protects attributes the server template does **not** set. Checked on `toEl` for consistent server authority.
+- In-band `__navigate__` SPA navigation: same-pathname link clicks send `{action:"__navigate__", data:<params>}` over the existing WebSocket instead of fetching new HTML. Requires server-side support (livetemplate/livetemplate#344).
+- DOMParser fallback in `updateDOM`: HTML containing `<script>` tags is now parsed via `DOMParser` to avoid a Chrome `innerHTML` bug that creates phantom duplicate DOM nodes after script tags.
+
+### Breaking Changes
+
+- **Cross-pathname same-handler navigation now always reconnects.** Previously, if two routes shared the same `data-lvt-id`, navigating between them would do an in-place DOM swap without reconnecting. This fast path has been removed; all cross-pathname navigations (regardless of handler ID) now trigger a full WebSocket reconnect. This is the correct behavior — same-ID across paths means two distinct routes, and `sendNavigate` cannot express a path change. **If your app shares a `data-lvt-id` across routes, expect a reconnect flash where there was none before.**
+
+### Deployment note
+
+The `__navigate__` in-band action is a no-op on server versions before livetemplate/livetemplate#344. Deploy the server update before or simultaneously with this client version to avoid same-pathname link clicks sending an unrecognized WebSocket action.
+
 ## [v0.8.25] - 2026-04-15
 
 ### Changes
diff --git a/dom/link-interceptor.ts b/dom/link-interceptor.ts
index 1b15e7c..5284031 100644
--- a/dom/link-interceptor.ts
+++ b/dom/link-interceptor.ts
@@ -3,12 +3,30 @@ import type { Logger } from "../utils/logger";
 export interface LinkInterceptorContext {
   getWrapperElement(): Element | null;
   handleNavigationResponse(html: string): void;
+  // Send an in-band navigate message over the existing WebSocket.
+  // Returns true if the message was sent, false if it was dropped
+  // (e.g. WS not open). The caller uses this to decide whether to push
+  // browser history state — only advancing the URL when the server will
+  // actually receive the navigate eliminates the TOCTOU window where
+  // the WS could close between canSendNavigate() and the actual send.
+  sendNavigate(href: string): boolean;
+  // Returns true when an in-band navigate message can be sent (i.e.
+  // WebSocket mode is active and the socket is OPEN). In HTTP mode or
+  // when the WS is not yet open, this is false and the same-pathname
+  // fast path must fall through to a normal fetch.
+  canSendNavigate(): boolean;
 }
 
 /**
  * Intercepts <a> clicks within the LiveTemplate wrapper for SPA navigation.
- * Same-origin links are fetched via fetch() and the wrapper content is replaced.
- * External links, target="_blank", download, and lvt-nav:no-intercept are skipped.
+ *
+ * - Same pathname (query-string change only) -> sends __navigate__ over WS;
+ *   no fetch, no DOM replace, no reconnect.
+ * - Different pathname (cross-handler or just different route) -> fetches
+ *   new HTML and hands it to handleNavigationResponse, which decides
+ *   between same-handler DOM replace and cross-handler reconnect.
+ * - External links, target="_blank", download, and lvt-nav:no-intercept
+ *   are skipped.
  *
  * Uses AbortController to cancel in-flight fetches when a new navigation
  * starts (rapid clicks, back/forward during fetch).
@@ -102,6 +120,63 @@ export class LinkInterceptor {
   }
 
   private async navigate(href: string, pushState: boolean = true): Promise<void> {
+    const targetURL = new URL(href, window.location.origin);
+    const samePath =
+      targetURL.origin === window.location.origin &&
+      targetURL.pathname === window.location.pathname;
+
+    if (samePath) {
+      const sameSearch = targetURL.search === window.location.search;
+      if (sameSearch) {
+        // Hash-only change or exact same URL — the browser handles scroll
+        // to the anchor; no server round-trip is needed. This guard also
+        // prevents a spurious __navigate__ from the popstate listener when
+        // the user navigates between same-pathname hash anchors (shouldSkip
+        // catches direct <a> clicks, but popstate calls navigate() directly
+        // and bypasses shouldSkip).
+        //
+        // Still abort any in-flight cross-path fetch: if a fetch was in
+        // progress when the user clicked a hash anchor, we don't want it
+        // to resolve and call handleNavigationResponse unexpectedly.
+        this.abortController?.abort();
+        this.abortController = null;
+        return;
+      }
+
+      if (this.context.canSendNavigate()) {
+        // Same-pathname, different search, WebSocket mode: use the in-band
+        // fast path. Before this existed, same-pathname clicks went through
+        // fetch + replaceChildren, which swapped DOM but left server state
+        // pinned to the OLD query params ("clicking any session always shows
+        // the first one" bug in devbox-dash).
+        //
+        // Abort any in-flight fetch even on the fast path: a user could
+        // click a cross-path link (starting a fetch) and quickly click a
+        // same-pathname link. Without aborting, the earlier fetch can
+        // still resolve and call handleNavigationResponse, racing with the
+        // in-band __navigate__ update.
+        this.abortController?.abort();
+        this.abortController = null;
+        // sendNavigate returns true if the WS message was actually sent.
+        // Push history state ONLY on success to keep window.location
+        // consistent with what the server received.
+        // If sent === false (defensive path — normally unreachable since
+        // canSendNavigate() already checked readyState), fall through to
+        // the normal fetch so the navigation isn't silently dropped.
+        const sent = this.context.sendNavigate(href);
+        if (sent) {
+          if (pushState) {
+            window.history.pushState(null, "", href);
+          }
+          return;
+        }
+        // sendNavigate returned false — fall through to fetch as recovery.
+      }
+      // HTTP mode, WS not OPEN, or sendNavigate returned false:
+      // fall through to normal fetch. pushState is handled downstream by
+      // the fetch path (after the response resolves).
+    }
+
     // Cancel any in-flight navigation fetch
     this.abortController?.abort();
     this.abortController = new AbortController();
diff --git a/livetemplate-client.ts b/livetemplate-client.ts
index ae978a7..60df03a 100644
--- a/livetemplate-client.ts
+++ b/livetemplate-client.ts
@@ -111,7 +111,20 @@ export class LiveTemplateClient {
     this.options = {
       autoReconnect: false, // Disable autoReconnect by default to avoid connection loops
       reconnectDelay: 1000,
-      liveUrl: window.location.pathname + window.location.search, // Connect to current page (including query params)
+      // liveUrl captures the current page URL (path + search) so the
+      // initial WebSocket handshake reaches the server with the same
+      // query params Mount saw on the HTTP GET. This is intentional —
+      // without the search, the WS-side Mount re-runs with empty data
+      // and drifts state from the HTTP render.
+      //
+      // For *same-handler* SPA navigation (changing query params on
+      // the same path), the client does NOT reconnect — instead it
+      // sends an in-band {action:"__navigate__", data:<params>} message
+      // over the existing WebSocket, and the server re-runs Mount with
+      // the new data. See sendNavigate() and handleNavigationResponse()
+      // for the SPA path. Cross-handler SPA navigation still does the
+      // fetch-and-replaceChildren+reconnect dance.
+      liveUrl: window.location.pathname + window.location.search,
       ...restOptions,
     };
 
@@ -189,6 +202,14 @@ export class LiveTemplateClient {
       {
         getWrapperElement: () => this.wrapperElement,
         handleNavigationResponse: (html: string) => this.handleNavigationResponse(html),
+        sendNavigate: (href: string) => this.sendNavigate(href),
+        // Only take the in-band fast path when the WS is actually OPEN.
+        // If WS is CONNECTING or CLOSED, falling through to the normal fetch
+        // path is safer: pushState fires after the fetch resolves (not before),
+        // so the browser URL never gets ahead of server state.
+        canSendNavigate: () =>
+          !this.useHTTP &&
+          this.webSocketManager.getReadyState() === 1 /* WebSocket.OPEN */,
       },
       this.logger.child("LinkInterceptor")
     );
@@ -542,6 +563,88 @@ export class LiveTemplateClient {
     return this.liveUrlOverride || this.options.liveUrl || "/live";
   }
 
+  /**
+   * Send an in-band navigate message over the existing WebSocket.
+   *
+   * This is the client side of the same-handler SPA navigation flow.
+   * Rather than disconnect + reconnect to land a URL change (which is
+   * what cross-handler nav does and what the old same-handler path
+   * silently skipped), we parse the target URL's query params into a
+   * data map and send {action: "__navigate__", data: params}. The
+   * server special-cases this action name in its event loop (see
+   * livetemplate/mount.go) and re-runs Mount with the new data without
+   * tearing down the connection.
+   *
+   * Equivalent to Phoenix LiveView's live_patch / handle_params:
+   * path-level identity for the socket, Mount-level re-projection for
+   * query-string changes.
+   *
+   * @param href - The target URL to navigate to. Only the search params
+   *               are consumed; the pathname is assumed to match the
+   *               current page (caller checks same-handler first).
+   */
+  private sendNavigate(href: string): boolean {
+    const url = new URL(href, window.location.origin);
+    const data: Record<string, string> = {};
+    // Note: duplicate keys (e.g. ?tag=a&tag=b) are last-write-wins here.
+    // LiveTemplate routes use scalar string params by convention. Routes
+    // that need repeated params should not use sendNavigate directly.
+    const seenKeys = new Set<string>();
+    url.searchParams.forEach((v, k) => {
+      if (seenKeys.has(k)) {
+        this.logger.warn("sendNavigate: duplicate query param key — last value wins; server may receive incomplete data", { key: k, href });
+      }
+      seenKeys.add(k);
+      data[k] = v;
+    });
+
+    const newLiveUrl = url.pathname + url.search;
+
+    // __navigate__ is a WebSocket-only in-band action — only call send()
+    // when the socket is actually OPEN.
+    //
+    // Note: this.useHTTP is not checked here because sendNavigate() is only
+    // reachable when canSendNavigate() returns true (i.e. !this.useHTTP and
+    // readyState === 1), enforced by LinkInterceptor. Checking useHTTP or
+    // re-checking readyState here would be dead code in the normal call path.
+    // The guard below is a defensive fallback for direct callers that bypass
+    // canSendNavigate().
+    if (this.webSocketManager.getReadyState() !== 1 /* WebSocket.OPEN */) {
+      const readyState = this.webSocketManager.getReadyState();
+      if (readyState === 3 /* CLOSED */) {
+        this.logger.error(
+          "sendNavigate: WebSocket is CLOSED and autoReconnect may be disabled; " +
+          "navigate message dropped. Reload or re-enable autoReconnect.",
+          { href }
+        );
+      } else {
+        // CONNECTING (0) or CLOSING (2). autoReconnect defaults to false.
+        if (!this.options.autoReconnect) {
+          this.logger.error(
+            "sendNavigate: WS not open and autoReconnect is disabled; navigate may be permanently lost",
+            { href, readyState }
+          );
+        } else {
+          this.logger.warn(
+            "sendNavigate: WS not open; browser URL is ahead of server state until reconnect",
+            { href, readyState }
+          );
+        }
+      }
+      return false;
+    }
+
+    // Socket is OPEN: commit the URL update and send the navigate message.
+    // liveUrlOverride is updated here (not before the guard) so it only
+    // advances when the message is actually sent — keeping it consistent
+    // with window.location throughout.
+    this.liveUrlOverride = newLiveUrl;
+    this.webSocketManager.setLiveUrl(newLiveUrl);
+    this.logger.debug("sendNavigate", { href, data });
+    this.send({ action: "__navigate__", data });
+    return true;
+  }
+
   /**
    * Send action via HTTP POST
    */
@@ -656,21 +759,20 @@ export class LiveTemplateClient {
       document.title = newTitleText;
     }
 
-    // Try same-handler wrapper first (same data-lvt-id)
-    const sameWrapper = oldId
-      ? doc.querySelector(`[data-lvt-id="${oldId}"]`)
-      : null;
-
-    if (sameWrapper) {
-      this.wrapperElement.replaceChildren(
-        ...Array.from(sameWrapper.childNodes).map((n) => n.cloneNode(true))
-      );
-      this.eventDelegator.setupEventDelegation();
-      this.linkInterceptor.setup(this.wrapperElement);
-      return;
-    }
-
-    // Check for a different handler's wrapper (cross-handler navigation)
+    // sameWrapper: the fetched page has the same data-lvt-id as the current
+    // wrapper. This means two different paths share the same handler ID.
+    // handleNavigationResponse is only reached via LinkInterceptor for
+    // cross-pathname navigations (same-pathname links are caught by the fast
+    // path before a fetch is issued and handled via sendNavigate directly).
+    // For cross-pathname same-ID, a full reconnect is correct: the server
+    // must receive the new URL to re-run Mount on the right route. We fall
+    // through to the newWrapper block below, which handles both same-ID and
+    // different-ID handler switches identically.
+    //
+    // Same-pathname same-ID navigation (query-param change on the same route)
+    // is covered exclusively by LinkInterceptor's fast path and navigate.test.ts.
+
+    // Check for any handler wrapper (same-ID cross-path or different handler)
     const newWrapper = doc.querySelector("[data-lvt-id]");
     if (newWrapper) {
       const newId = newWrapper.getAttribute("data-lvt-id");
@@ -720,46 +822,58 @@ export class LiveTemplateClient {
       // page path and the WebSocket path are always the same. Apps that
       // need a different WebSocket endpoint should set `wsUrl`, which
       // takes precedence over `liveUrl` in WebSocketManager.
+      //
+      // Invariant: link-interceptor.ts calls pushState BEFORE invoking
+      // handleNavigationResponse, so window.location here always
+      // reflects the final target URL (not the previous one). This is
+      // why liveUrlOverride is never stale for cross-pathname navigations
+      // even if sendNavigate had previously set it to a same-pathname URL.
       const newLiveUrl =
         window.location.pathname + window.location.search;
       this.liveUrlOverride = newLiveUrl;
       this.webSocketManager.setLiveUrl(newLiveUrl);
 
-      // Reconnect to the new handler. The server sends an initial tree
-      // that produces the same DOM as the fetched HTML.
-      //
-      // Escape the wrapper ID to defend against (pathological) server
-      // responses with special characters that would break the
-      // attribute selector. Only `"` and `\` need escaping inside a
-      // double-quoted attribute value selector (`[attr="..."]`), and
-      // we prefer a manual escape over CSS.escape() which is not
-      // available in jsdom test environments.
-      //
-      // Epoch semantics: the failure branch is guarded by the epoch
-      // check to avoid stale reloads. The success branch has no work
-      // to do — there's nothing for handleNavigationResponse to undo
-      // on success.
-      //
-      // Known limitation: if two cross-handler navigations run in rapid
-      // succession (A then B), A's connect() might still be executing
-      // its post-await setup (useHTTP assignment, initial state
-      // rendering, event delegation) when B starts. Because there's
-      // only one WebSocketManager transport at a time, B's disconnect()
-      // kills A's in-flight transport, and B's setup happens on the
-      // wrapper with B's ID. If A's post-await code runs AFTER B sets
-      // the wrapper ID, A's querySelector lookup would already be
-      // stale (it captured the wrapper synchronously before the await).
-      // A true fix requires making connect() itself cancellable with
-      // an AbortSignal, which is out of scope for this PR. In practice,
-      // two successive SPA navigations within a single event loop tick
-      // are rare, and the idempotent setup methods minimize fallout.
-      const escapedId = newId.replace(/[\\"]/g, "\\$&");
-      const selector = `[data-lvt-id="${escapedId}"]`;
-      this.connect(selector).catch((err) => {
-        if (myEpoch !== this.navigationEpoch) return;
-        this.logger.error("Cross-handler reconnect failed:", err);
-        window.location.reload();
-      });
+      // In HTTP mode there is no persistent WebSocket connection — skip
+      // connect() so we don't unexpectedly create a WebSocket. The DOM swap
+      // and event re-setup above are sufficient for HTTP-mode apps; the next
+      // user action will POST via the normal HTTP send path.
+      if (!this.useHTTP) {
+        // Reconnect to the new handler. The server sends an initial tree
+        // that produces the same DOM as the fetched HTML.
+        //
+        // Escape the wrapper ID to defend against (pathological) server
+        // responses with special characters that would break the
+        // attribute selector. Only `"` and `\` need escaping inside a
+        // double-quoted attribute value selector (`[attr="..."]`), and
+        // we prefer a manual escape over CSS.escape() which is not
+        // available in jsdom test environments.
+        //
+        // Epoch semantics: the failure branch is guarded by the epoch
+        // check to avoid stale reloads. The success branch has no work
+        // to do — there's nothing for handleNavigationResponse to undo
+        // on success.
+        //
+        // Known limitation: if two cross-handler navigations run in rapid
+        // succession (A then B), A's connect() might still be executing
+        // its post-await setup (useHTTP assignment, initial state
+        // rendering, event delegation) when B starts. Because there's
+        // only one WebSocketManager transport at a time, B's disconnect()
+        // kills A's in-flight transport, and B's setup happens on the
+        // wrapper with B's ID. If A's post-await code runs AFTER B sets
+        // the wrapper ID, A's querySelector lookup would already be
+        // stale (it captured the wrapper synchronously before the await).
+        // A true fix requires making connect() itself cancellable with
+        // an AbortSignal, which is out of scope for this PR. In practice,
+        // two successive SPA navigations within a single event loop tick
+        // are rare, and the idempotent setup methods minimize fallout.
+        const escapedId = newId.replace(/[\\"]/g, "\\$&");
+        const selector = `[data-lvt-id="${escapedId}"]`;
+        this.connect(selector).catch((err) => {
+          if (myEpoch !== this.navigationEpoch) return;
+          this.logger.error("Cross-handler reconnect failed:", err);
+          window.location.reload();
+        });
+      }
       return;
     }
 
@@ -907,7 +1021,58 @@ export class LiveTemplateClient {
       );
     }
 
-    tempWrapper.innerHTML = result.html;
+    // Use DOMParser when the HTML contains <script> tags. Browsers'
+    // innerHTML parser handles scripts specially and can create phantom
+    // duplicate DOM nodes after the closing tag. DOMParser doesn't have
+    // this quirk because it returns a standalone document.
+    //
+    // Regex /<script[\s>]/i is more precise than a bare "<script" string
+    // match: it avoids false positives from words ending in "script" that
+    // aren't a tag (e.g. "noscript"), while still matching <script>,
+    // <script type="..."> and <SCRIPT> case-insensitively.
+    // Note: it can still match <script inside attribute values or HTML
+    // comments — a false positive is harmless (DOMParser is always safe;
+    // we just pay a small allocation cost for the parse).
+    //
+    // Wrap with the same tagName as the target element (not a hard-coded
+    // <div>) so that DOMParser applies the correct HTML parsing rules.
+    // Wrapping <tr>/<td>/<option> content in a <div> can trigger
+    // browser re-parenting; using the real container tag avoids that.
+    if (/<script[\s>]/i.test(result.html)) {
+      // Guard: <body> and <html> cannot be used as wrapper tags for
+      // parseFromString — doc.body.firstElementChild would return the
+      // first child of body, not the body itself, discarding the wrap.
+      // Fall back to <div> for these edge cases; updateDOM is called on
+      // the lvt wrapper div in practice, so this branch is defensive.
+      const rawTag = element.tagName.toLowerCase();
+      const wrapTag = (rawTag === "body" || rawTag === "html") ? "div" : rawTag;
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(
+        `<${wrapTag}>${result.html}</${wrapTag}>`,
+        "text/html"
+      );
+      const root = doc.body.firstElementChild;
+      if (root) {
+        // Array.from snapshots the live NodeList before replaceChildren
+        // starts moving nodes, keeping iteration stable.
+        //
+        // Note: DOMParser still re-parents bare table-cell content (tr/td
+        // without surrounding table+tbody) even when wrapTag matches.
+        // Slots rendered into table-cell elements with <script> tags are
+        // an edge case; a follow-up can add a full-table wrapper for those.
+        tempWrapper.replaceChildren(...Array.from(root.childNodes));
+      } else {
+        // root is null when the HTML parser produced no element child for
+        // our wrapper tag (e.g. the wrapper was itself re-parented or the
+        // fragment is text-only). Fall back to doc.body children — the
+        // content is still present there, already parsed by DOMParser
+        // without the script-duplication quirk that innerHTML triggers.
+        this.logger.warn("[updateDOM] DOMParser: no wrapper root element; using doc.body children");
+        tempWrapper.replaceChildren(...Array.from(doc.body.childNodes));
+      }
+    } else {
+      tempWrapper.innerHTML = result.html;
+    }
 
     if (this.logger.isDebugEnabled()) {
       this.logger.debug(
@@ -942,6 +1107,92 @@ export class LiveTemplateClient {
         }
       },
       onBeforeElUpdated: (fromEl, toEl) => {
+        // Honour lvt-preserve: the client owns this element's entire
+        // subtree and morphdom should never touch any of it.
+        // Attributes, content, descendants all stay exactly as the DOM
+        // currently has them. Equivalent to Phoenix LiveView's
+        // phx-update="ignore" and Turbo's data-turbo-permanent. Useful
+        // for third-party widgets (maps, date pickers, charts) that
+        // mutate their own DOM, and for scroll containers with
+        // JS-managed scrollTop.
+        //
+        // We check toEl (the incoming server version) rather than fromEl
+        // (the current DOM). This gives the server authority: if a later
+        // render omits lvt-preserve, morphdom resumes updating the element.
+        // Checking fromEl would make the attribute sticky in the DOM
+        // forever once applied, preventing the server from ever removing it.
+        //
+        // For the subtler case of "preserve my *attributes* but still
+        // let children update" (e.g. <details open>, <select> with
+        // user-selected options), use lvt-preserve-attrs below.
+        //
+        // Priority: lvt-preserve is checked first and returns early; if
+        // toEl has lvt-preserve, lvt-preserve-attrs on the same element
+        // is never reached. lvt-preserve wins (full freeze > partial
+        // attribute-only freeze).
+        if (
+          toEl.nodeType === Node.ELEMENT_NODE &&
+          (toEl as Element).hasAttribute("lvt-preserve")
+        ) {
+          return false;
+        }
+
+        // Honour lvt-preserve-attrs: the client owns this element's own
+        // attributes (e.g. the <details open> state the user toggled),
+        // but its children should still be diffed against the new tree.
+        // This is the right fit for collapsible pickers where the
+        // *container* state is user-managed but the *items* inside are
+        // server-authored and must reflect the latest data.
+        //
+        // Implementation: copy fromEl's attributes that are missing from
+        // toEl onto toEl before morphdom runs its attribute diff. This
+        // makes morphdom see the user-owned attrs as "already present"
+        // in the new version, so it doesn't remove them. Attributes that
+        // exist in both fromEl and toEl take toEl's value (server wins
+        // over client for attributes the template does control), which
+        // preserves the ability to update className etc. on the same
+        // element from the server.
+        //
+        // Limitation: only *missing* attributes from fromEl are copied.
+        // If the server's toEl already has e.g. class="card", that value
+        // is used — JS-added classes (el.classList.add('open')) are
+        // silently overwritten on the next diff. Use lvt-preserve-attrs
+        // for attributes the server template does NOT set at all.
+        //
+        // We check toEl (the incoming server tree), not fromEl (the live
+        // DOM), so the server has authority: removing lvt-preserve-attrs
+        // from the template takes effect immediately on the next render,
+        // consistent with how lvt-preserve works.
+        if (
+          toEl.nodeType === Node.ELEMENT_NODE &&
+          (toEl as Element).hasAttribute("lvt-preserve-attrs") &&
+          fromEl.nodeType === Node.ELEMENT_NODE
+        ) {
+          const fromAttrs = (fromEl as Element).attributes;
+          const toElement = toEl as Element;
+          for (let i = 0; i < fromAttrs.length; i++) {
+            const attr = fromAttrs[i];
+            // Skip the preserve control attributes themselves so the
+            // server can opt elements in/out across renders. If we
+            // copied lvt-preserve-attrs back onto toEl, the server
+            // could never remove the attribute in a future update.
+            if (
+              attr.name === "lvt-preserve" ||
+              attr.name === "lvt-preserve-attrs"
+            ) {
+              continue;
+            }
+            // Use hasAttributeNS / setAttributeNS to preserve namespace
+            // info (e.g. xlink:href on SVG elements). For plain HTML
+            // attributes namespaceURI is null, so this degrades to the
+            // same behaviour as setAttribute.
+            if (!toElement.hasAttributeNS(attr.namespaceURI, attr.localName)) {
+              toElement.setAttributeNS(attr.namespaceURI, attr.name, attr.value);
+            }
+          }
+          // Fall through to normal diff path so children are still updated.
+        }
+
         // Skip update entirely for focused form elements to preserve user
         // input. This also skips attribute updates (class, disabled, aria-*)
         // and the lvt-updated hook — use data-lvt-force-update to override.
diff --git a/tests/conditional-slot-transition.test.ts b/tests/conditional-slot-transition.test.ts
new file mode 100644
index 0000000..83b91ac
--- /dev/null
+++ b/tests/conditional-slot-transition.test.ts
@@ -0,0 +1,109 @@
+/**
+ * Regression test for the conditional-slot structural transition bug.
+ *
+ * When a template slot transitions from an empty string ("") to a
+ * sub-tree with its own statics ({"0":"text","s":["<mark>","</mark>"]}),
+ * the rendered HTML must include the statics. Before the fix, the
+ * client's tree renderer silently dropped the transition and the DOM
+ * never showed the <mark> tag.
+ *
+ * This test operates at the TreeRenderer level (no morphdom, no
+ * WebSocket) to isolate the reconstruction bug from the DOM-patching
+ * layer.
+ */
+
+import { LiveTemplateClient } from "../livetemplate-client";
+
+describe("conditional slot structural transition", () => {
+  let client: LiveTemplateClient;
+
+  beforeEach(() => {
+    client = new LiveTemplateClient();
+  });
+
+  it("slot transitioning from empty string to sub-tree with statics renders the statics", () => {
+    // Initial tree: slot 1 is a simple empty string (the {{if .Error}}
+    // block evaluated to false on the first render).
+    const initialTree = {
+      s: ["<p>status: ", " error: ", "</p>"],
+      0: "ok",
+      1: "",
+    };
+    const r1 = client.applyUpdate(initialTree);
+    expect(r1.html).toContain("status: ok");
+    expect(r1.html).not.toContain("<mark>");
+
+    // Update: slot 1 transitions from "" to a sub-tree with statics
+    // (the {{if .Error}} block now evaluates to true, emitting a
+    // <mark> wrapper around the error text).
+    const update = {
+      1: {
+        s: [" — <mark>", "</mark>"],
+        0: "something broke",
+      },
+    };
+    const r2 = client.applyUpdate(update);
+
+    // The rendered HTML MUST include the <mark> tag from the sub-tree's
+    // statics. Before the fix, r2.html was "<p>status: ok error: </p>"
+    // — the sub-tree was silently dropped.
+    expect(r2.html).toContain("<mark>");
+    expect(r2.html).toContain("something broke");
+    expect(r2.html).toContain("</mark>");
+    // Full expected: "<p>status: ok error:  — <mark>something broke</mark></p>"
+    expect(r2.html).toContain(" — <mark>something broke</mark>");
+  });
+
+  it("slot transitioning from sub-tree back to empty string removes the statics", () => {
+    // Start with the sub-tree present.
+    const initialTree = {
+      s: ["<p>status: ", " error: ", "</p>"],
+      0: "ok",
+      1: {
+        s: [" — <mark>", "</mark>"],
+        0: "something broke",
+      },
+    };
+    const r1 = client.applyUpdate(initialTree);
+    expect(r1.html).toContain("<mark>something broke</mark>");
+
+    // Update: error clears, slot 1 goes back to empty string.
+    const update = { 1: "" };
+    const r2 = client.applyUpdate(update);
+
+    expect(r2.html).not.toContain("<mark>");
+    expect(r2.html).not.toContain("something broke");
+  });
+
+  it("multiple transitions back and forth work correctly", () => {
+    const initialTree = {
+      s: ["<div>", "</div>"],
+      0: "",
+    };
+    client.applyUpdate(initialTree);
+
+    // Empty → sub-tree
+    const r1 = client.applyUpdate({
+      0: { s: ["<b>", "</b>"], 0: "bold" },
+    });
+    expect(r1.html).toContain("<b>bold</b>");
+
+    // Sub-tree → different sub-tree
+    const r2 = client.applyUpdate({
+      0: { s: ["<em>", "</em>"], 0: "italic" },
+    });
+    expect(r2.html).toContain("<em>italic</em>");
+    expect(r2.html).not.toContain("<b>");
+
+    // Sub-tree → empty
+    const r3 = client.applyUpdate({ 0: "" });
+    expect(r3.html).not.toContain("<em>");
+    expect(r3.html).not.toContain("<b>");
+
+    // Empty → sub-tree again
+    const r4 = client.applyUpdate({
+      0: { s: ["<b>", "</b>"], 0: "back" },
+    });
+    expect(r4.html).toContain("<b>back</b>");
+  });
+});
diff --git a/tests/navigate.test.ts b/tests/navigate.test.ts
new file mode 100644
index 0000000..5b5e9a0
--- /dev/null
+++ b/tests/navigate.test.ts
@@ -0,0 +1,250 @@
+/**
+ * Tests for in-band navigate message (same-handler SPA navigation).
+ *
+ * Same-pathname link clicks must bypass fetch() entirely and send a
+ * {action: "__navigate__", data: <query params>} message over the
+ * existing WebSocket. The server's event loop special-cases this
+ * action name to re-run Mount with the new query data without
+ * tearing down the connection — the in-band equivalent of Phoenix
+ * LiveView's live_patch / handle_params.
+ *
+ * The regression these tests guard against is the devbox-dash bug
+ * where clicking between same-handler variants (/claude?s=A vs
+ * /claude?s=B) would swap DOM but leave the server's per-connection
+ * state pinned to the original query params, so the next server-driven
+ * refresh clobbered the DOM with stale content.
+ */
+
+import { LinkInterceptor, LinkInterceptorContext } from "../dom/link-interceptor";
+import type { Logger } from "../utils/logger";
+
+// Minimal logger stub — LinkInterceptor uses it only for debug/error logging.
+const silentLogger: Logger = {
+  isDebugEnabled: () => false,
+  isInfoEnabled: () => false,
+  isWarnEnabled: () => true,
+  isErrorEnabled: () => true,
+  child: () => silentLogger,
+  setLevel: () => {},
+  debug: () => {},
+  info: () => {},
+  warn: () => {},
+  error: () => {},
+  trace: () => {},
+} as unknown as Logger;
+
+describe("LinkInterceptor same-pathname navigate bypass", () => {
+  let wrapper: HTMLElement;
+  let sendNavigateSpy: jest.Mock<boolean, [string]>;
+  let handleNavigationResponseSpy: jest.Mock<void, [string]>;
+  let fetchMock: jest.SpyInstance;
+  let interceptor: LinkInterceptor;
+
+  beforeEach(() => {
+    document.body.replaceChildren();
+    wrapper = document.createElement("div");
+    wrapper.setAttribute("data-lvt-id", "nav-test-wrapper");
+    document.body.appendChild(wrapper);
+
+    sendNavigateSpy = jest.fn().mockReturnValue(true);
+    handleNavigationResponseSpy = jest.fn();
+    // jsdom doesn't ship a global fetch; define a no-op stub so jest.spyOn
+    // has something to wrap. jest.restoreAllMocks() in afterEach then cleans
+    // up the spy automatically, even if beforeEach throws after this point.
+    if (typeof (globalThis as any).fetch !== "function") {
+      (globalThis as any).fetch = () => {};
+    }
+    fetchMock = jest
+      .spyOn(globalThis as any, "fetch")
+      .mockImplementation(() =>
+        Promise.resolve(new Response("<html></html>", { status: 200 }))
+      );
+
+    const ctx: LinkInterceptorContext = {
+      getWrapperElement: () => wrapper,
+      handleNavigationResponse: handleNavigationResponseSpy,
+      sendNavigate: sendNavigateSpy,
+      canSendNavigate: () => true,
+    };
+    interceptor = new LinkInterceptor(ctx, silentLogger);
+    interceptor.setup(wrapper);
+
+    // Pin the current location so test navigations have something to
+    // compare their pathname against. jsdom defaults to about:blank,
+    // which has no useful pathname.
+    history.replaceState(null, "", "/claude?s=initial");
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    // Tear down any listeners the interceptor added to document.
+    interceptor.teardownForWrapper(wrapper.getAttribute("data-lvt-id"));
+  });
+
+  it("same-pathname link click sends navigate message, no fetch", async () => {
+    // Build a link whose href shares the current pathname but has
+    // a different query string.
+    const link = document.createElement("a");
+    link.href = "/claude?s=new-session";
+    link.textContent = "switch";
+    wrapper.appendChild(link);
+
+    // Simulate a real user click.
+    link.click();
+
+    // Give the async navigate path a microtask to run.
+    await Promise.resolve();
+
+    expect(sendNavigateSpy).toHaveBeenCalledTimes(1);
+    expect(sendNavigateSpy.mock.calls[0][0]).toContain("s=new-session");
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(handleNavigationResponseSpy).not.toHaveBeenCalled();
+
+    // History state should have been updated so a subsequent
+    // reload picks up the new URL.
+    expect(window.location.search).toBe("?s=new-session");
+  });
+
+  it("different-pathname link click goes through fetch, not navigate", async () => {
+    const link = document.createElement("a");
+    link.href = "/other-page";
+    link.textContent = "other";
+    wrapper.appendChild(link);
+
+    link.click();
+
+    // Give the sync portion of LinkInterceptor.navigate a microtask.
+    // We're only asserting that fetch() was invoked (the key branch
+    // point) and sendNavigate was NOT — not that the post-fetch chain
+    // completed.
+    await Promise.resolve();
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(sendNavigateSpy).not.toHaveBeenCalled();
+  });
+
+  it("external-origin link click is not intercepted at all", async () => {
+    const link = document.createElement("a");
+    link.href = "https://example.com/claude?s=foo";
+    link.textContent = "external";
+    wrapper.appendChild(link);
+
+    link.click();
+    await Promise.resolve();
+
+    expect(sendNavigateSpy).not.toHaveBeenCalled();
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(handleNavigationResponseSpy).not.toHaveBeenCalled();
+  });
+
+  it("same-pathname click aborts any in-flight cross-path fetch", async () => {
+    // Regression: if a cross-path fetch is in flight and the user then
+    // clicks a same-pathname link, the earlier fetch must be aborted so
+    // it cannot later call handleNavigationResponse and race with the
+    // in-band __navigate__ update.
+
+    // First, initiate a cross-path fetch that never resolves until aborted.
+    let capturedSignal: AbortSignal | null = null;
+    fetchMock.mockImplementation((_url: string, opts: RequestInit) => {
+      capturedSignal = opts.signal as AbortSignal;
+      // Never resolve — the test controls when this settles via the signal.
+      return new Promise((_resolve, _reject) => {
+        opts.signal?.addEventListener("abort", () => {
+          _reject(new DOMException("AbortError", "AbortError"));
+        });
+      });
+    });
+
+    const crossPathLink = document.createElement("a");
+    crossPathLink.href = "/other-page?x=1";
+    wrapper.appendChild(crossPathLink);
+    crossPathLink.click();
+    await Promise.resolve();
+
+    // Cross-path click should have started a fetch and captured the signal.
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(capturedSignal).not.toBeNull();
+    expect((capturedSignal as unknown as AbortSignal).aborted).toBe(false);
+
+    // Now click a same-pathname link — this must abort the in-flight fetch.
+    const samePathLink = document.createElement("a");
+    samePathLink.href = "/claude?s=fast-nav";
+    wrapper.appendChild(samePathLink);
+    samePathLink.click();
+    await Promise.resolve();
+
+    expect(sendNavigateSpy).toHaveBeenCalledTimes(1);
+    expect((capturedSignal as unknown as AbortSignal).aborted).toBe(true);
+  });
+
+  it("same-pathname with no query string still sends navigate (empty data)", async () => {
+    // User clicks a link that drops all query params ("back to list").
+    const link = document.createElement("a");
+    link.href = "/claude";
+    link.textContent = "all sessions";
+    wrapper.appendChild(link);
+
+    link.click();
+    await Promise.resolve();
+
+    expect(sendNavigateSpy).toHaveBeenCalledTimes(1);
+    expect(fetchMock).not.toHaveBeenCalled();
+    // The sendNavigate URL should be /claude (no query).
+    const arg = sendNavigateSpy.mock.calls[0][0];
+    expect(arg).not.toContain("s=");
+  });
+
+  it("HTTP mode: same-pathname click uses fetch, not navigate (canSendNavigate=false)", async () => {
+    // When canSendNavigate() returns false (HTTP mode), the interceptor
+    // must NOT enter the same-pathname fast path, because pushState would
+    // fire before sendNavigate is called and sendNavigate would bail early
+    // — leaving the URL permanently ahead of server state with no WS
+    // reconnect to recover it. The fix: fall through to a normal fetch.
+    interceptor.teardownForWrapper(wrapper.getAttribute("data-lvt-id"));
+
+    const httpCtx: LinkInterceptorContext = {
+      getWrapperElement: () => wrapper,
+      handleNavigationResponse: handleNavigationResponseSpy,
+      sendNavigate: sendNavigateSpy,
+      canSendNavigate: () => false, // HTTP mode
+    };
+    const httpInterceptor = new LinkInterceptor(httpCtx, silentLogger);
+    httpInterceptor.setup(wrapper);
+
+    const link = document.createElement("a");
+    link.href = "/claude?s=new-session";
+    wrapper.appendChild(link);
+
+    link.click();
+    await Promise.resolve();
+
+    // Must use fetch (not sendNavigate) even though pathname matches.
+    expect(sendNavigateSpy).not.toHaveBeenCalled();
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    httpInterceptor.teardownForWrapper(wrapper.getAttribute("data-lvt-id"));
+  });
+
+  it("hash-only popstate (same pathname + same search) does not trigger sendNavigate or fetch", async () => {
+    // Regression: the popstate listener calls navigate() directly, bypassing
+    // shouldSkip(). Without an explicit sameSearch guard in navigate(), a
+    // popstate to the same pathname+search with a different hash (e.g.
+    // /claude?s=initial → /claude?s=initial#section) would fire sendNavigate
+    // with data={} — a spurious server-side Mount re-run with no query change.
+    //
+    // Push a hash anchor so window.location changes to the hash URL.
+    history.pushState(null, "", "/claude?s=initial#section");
+    expect(window.location.search).toBe("?s=initial"); // search unchanged
+
+    // Dispatch popstate as the browser would on back/forward navigation.
+    window.dispatchEvent(new PopStateEvent("popstate", { state: null }));
+    await Promise.resolve();
+
+    // No sendNavigate (hash-only, no search change) and no fetch.
+    expect(sendNavigateSpy).not.toHaveBeenCalled();
+    expect(fetchMock).not.toHaveBeenCalled();
+
+    // Restore location for other tests.
+    history.replaceState(null, "", "/claude?s=initial");
+  });
+});
diff --git a/tests/navigation.test.ts b/tests/navigation.test.ts
index 28229fd..57750ac 100644
--- a/tests/navigation.test.ts
+++ b/tests/navigation.test.ts
@@ -26,23 +26,52 @@ describe("handleNavigationResponse", () => {
   };
 
   describe("same-handler navigation", () => {
-    it("replaces wrapper children when response has same data-lvt-id", () => {
+    // handleNavigationResponse is only reachable via LinkInterceptor for
+    // cross-pathname fetches. Same-pathname navigations (query-param change
+    // on the same route) are caught by the fast path in link-interceptor.ts
+    // and handled via sendNavigate() directly — no fetch, no call here.
+    //
+    // When handleNavigationResponse receives a same-handler-ID response
+    // from a cross-pathname fetch, it falls through to the reconnect path
+    // (same as a genuine handler switch). The in-band __navigate__ path for
+    // same-pathname navigation is covered in navigate.test.ts.
+
+    it("same-handler ID match from cross-path fetch triggers reconnect (not sendNavigate)", () => {
+      // Regression guard: two different routes sharing the same data-lvt-id
+      // must NOT call sendNavigate (which only ships query params, silently
+      // dropping the path change). The correct behaviour is a full reconnect.
+      const disconnectSpy = jest
+        .spyOn(client, "disconnect")
+        .mockImplementation(() => {});
+      const connectSpy = jest
+        .spyOn(client as any, "connect")
+        .mockResolvedValue(undefined);
+      const sendSpy = jest.spyOn(client, "send").mockImplementation(() => {});
+
       const html = [
-        "<html><head><title>Same Page</title></head><body>",
+        "<html><body>",
         '<div data-lvt-id="lvt-handler-a">',
-        "<p>Updated content from same handler</p>",
+        "<p>Content from /route-b</p>",
         "</div>",
         "</body></html>",
       ].join("");
 
       callHandleNavigationResponse(html);
 
-      expect(wrapper.textContent).toContain("Updated content from same handler");
-      expect(wrapper.getAttribute("data-lvt-id")).toBe("lvt-handler-a");
+      // sendNavigate must NOT have been called — that would drop the path.
+      expect(sendSpy).not.toHaveBeenCalled();
+      // Reconnect path must have fired instead.
+      expect(disconnectSpy).toHaveBeenCalled();
+
+      disconnectSpy.mockRestore();
+      connectSpy.mockRestore();
+      sendSpy.mockRestore();
     });
 
     it("preserves wrapper element identity", () => {
       const originalWrapper = wrapper;
+      const sendSpy = jest.spyOn(client, "send").mockImplementation(() => {});
+
       const html = [
         "<html><body>",
         '<div data-lvt-id="lvt-handler-a">',
@@ -54,6 +83,7 @@ describe("handleNavigationResponse", () => {
       callHandleNavigationResponse(html);
 
       expect((client as any).wrapperElement).toBe(originalWrapper);
+      sendSpy.mockRestore();
     });
   });
 
diff --git a/tests/preserve.test.ts b/tests/preserve.test.ts
new file mode 100644
index 0000000..69f9006
--- /dev/null
+++ b/tests/preserve.test.ts
@@ -0,0 +1,227 @@
+/**
+ * lvt-preserve attribute tests.
+ *
+ * lvt-preserve tells the morphdom diff engine "don't touch this element".
+ * It's the generic escape hatch for interactive elements whose state
+ * lives on the client side — <details open>, <dialog open>, checkbox
+ * state, scroll positions, third-party widgets, etc. Without it, any
+ * server-driven update that doesn't include the client-managed state
+ * clobbers it on the next diff cycle.
+ *
+ * Equivalent attributes in other frameworks:
+ *   - Phoenix LiveView: phx-update="ignore"
+ *   - Hotwire Turbo:    data-turbo-permanent
+ *   - HTMX:             hx-preserve="true"
+ */
+
+import { LiveTemplateClient } from "../livetemplate-client";
+
+describe("lvt-preserve attribute", () => {
+  let client: LiveTemplateClient;
+  let wrapper: HTMLElement;
+
+  beforeEach(() => {
+    client = new LiveTemplateClient();
+
+    // Minimal LiveTemplate-style wrapper the updateDOM path expects.
+    // Built via createElement so no innerHTML is needed in the test setup.
+    document.body.replaceChildren();
+    wrapper = document.createElement("div");
+    wrapper.setAttribute("data-lvt-id", "test-preserve");
+    document.body.appendChild(wrapper);
+  });
+
+  it("preserves an element's open attribute across updates", () => {
+    const initialTree = {
+      s: [
+        `<details lvt-preserve class="picker"><summary>Sessions</summary><div class="list">`,
+        `</div></details>`,
+      ],
+      0: "one two",
+    };
+    client.updateDOM(wrapper, initialTree);
+
+    const details = wrapper.querySelector("details") as HTMLDetailsElement;
+    expect(details).not.toBeNull();
+    expect(details.open).toBe(false);
+
+    // Simulate the user tapping the summary to expand the details.
+    details.setAttribute("open", "");
+    expect(details.open).toBe(true);
+
+    // Apply an update that does NOT contain the open attribute. Without
+    // lvt-preserve, morphdom would diff the incoming <details> against
+    // the DOM and remove the open attribute to match the server.
+    const updateTree = { 0: "one two three" };
+    client.updateDOM(wrapper, updateTree);
+
+    const detailsAfter = wrapper.querySelector(
+      "details"
+    ) as HTMLDetailsElement;
+    expect(detailsAfter).not.toBeNull();
+    expect(detailsAfter.open).toBe(true);
+  });
+
+  it("does not preserve elements without lvt-preserve (control)", () => {
+    // Same shape, no lvt-preserve. Verify the open state IS clobbered
+    // here — confirming the preservation guarantee in the test above
+    // is actually doing work and not just always passing.
+    const initialTree = {
+      s: [
+        `<details class="picker"><summary>Sessions</summary><div class="list">`,
+        `</div></details>`,
+      ],
+      0: "one two",
+    };
+    client.updateDOM(wrapper, initialTree);
+
+    const details = wrapper.querySelector("details") as HTMLDetailsElement;
+    details.setAttribute("open", "");
+    expect(details.open).toBe(true);
+
+    const updateTree = { 0: "one two three" };
+    client.updateDOM(wrapper, updateTree);
+
+    const detailsAfter = wrapper.querySelector(
+      "details"
+    ) as HTMLDetailsElement;
+    // Without lvt-preserve, morphdom diff removes the user's open attr.
+    expect(detailsAfter.open).toBe(false);
+  });
+
+  it("lvt-preserve-attrs keeps own attributes but still diffs children", () => {
+    // This is the subtler "collapsible picker" case: the <details>
+    // element's `open` attribute is user-toggled and must survive
+    // server updates, but the <a> cards inside ARE server-authored
+    // and their state (e.g. the `current` class marker for the
+    // selected item) must reflect the latest tree.
+    const initialTree = {
+      s: [
+        `<details lvt-preserve-attrs class="picker"><summary>Pick</summary>`,
+        `</details>`,
+      ],
+      0: `<a class="card">one</a><a class="card">two</a>`,
+    };
+    client.updateDOM(wrapper, initialTree);
+
+    const details = wrapper.querySelector("details") as HTMLDetailsElement;
+    expect(details).not.toBeNull();
+    expect(details.open).toBe(false);
+
+    // User opens the picker.
+    details.setAttribute("open", "");
+    expect(details.open).toBe(true);
+
+    // Server pushes an update where "two" is now the current card.
+    const updateTree = {
+      0: `<a class="card">one</a><a class="card current">two</a>`,
+    };
+    client.updateDOM(wrapper, updateTree);
+
+    const detailsAfter = wrapper.querySelector(
+      "details"
+    ) as HTMLDetailsElement;
+    // User's open state preserved.
+    expect(detailsAfter.open).toBe(true);
+    // But the children DID update — the second card now has "current".
+    const cards = wrapper.querySelectorAll("a.card");
+    expect(cards.length).toBe(2);
+    expect((cards[0] as HTMLElement).classList.contains("current")).toBe(false);
+    expect((cards[1] as HTMLElement).classList.contains("current")).toBe(true);
+  });
+
+  it("server can remove lvt-preserve by omitting it in the next full template", () => {
+    // lvt-preserve is checked on toEl (the incoming server version), not
+    // fromEl (the current DOM). This means the server retains authority:
+    // a later render that omits lvt-preserve lets morphdom resume updating
+    // the element. Checking fromEl would make the attribute sticky forever.
+    const initialTree = {
+      s: [`<div lvt-preserve class="widget">`, `</div>`],
+      0: "server-initial",
+    };
+    client.updateDOM(wrapper, initialTree);
+
+    const widget = wrapper.querySelector(".widget") as HTMLElement;
+    // Simulate the widget mutating its own DOM.
+    widget.textContent = "client-modified";
+
+    // Server sends a NEW template that removes lvt-preserve.
+    const removedTree = {
+      s: [`<div class="widget">`, `</div>`],
+      0: "server-updated",
+    };
+    client.updateDOM(wrapper, removedTree);
+
+    // Now that lvt-preserve is gone from the template, morphdom should
+    // have applied the server's update, overwriting the client state.
+    const widgetAfter = wrapper.querySelector(".widget") as HTMLElement;
+    expect(widgetAfter).not.toBeNull();
+    expect(widgetAfter.textContent).toBe("server-updated");
+    expect(widgetAfter.hasAttribute("lvt-preserve")).toBe(false);
+  });
+
+  it("server can remove lvt-preserve-attrs by omitting it in a later update", () => {
+    // The attribute-copy loop must NOT copy the lvt-preserve-attrs control
+    // attribute itself back onto toEl. If it did, the server could never
+    // remove the attribute in a future render (it would always be re-added
+    // by the copy loop before morphdom sees the diff).
+    const initialTree = {
+      s: [
+        `<details lvt-preserve-attrs class="picker"><summary>Pick</summary>`,
+        `</details>`,
+      ],
+      0: `<a class="card">item</a>`,
+    };
+    client.updateDOM(wrapper, initialTree);
+
+    const details = wrapper.querySelector("details") as HTMLDetailsElement;
+    expect(details.hasAttribute("lvt-preserve-attrs")).toBe(true);
+
+    // Server pushes an update WITHOUT lvt-preserve-attrs — it is opting
+    // the element back out of attribute preservation.
+    const updateTree = {
+      s: [
+        `<details class="picker"><summary>Pick</summary>`,
+        `</details>`,
+      ],
+      0: `<a class="card">item</a>`,
+    };
+    client.updateDOM(wrapper, updateTree);
+
+    const detailsAfter = wrapper.querySelector("details") as HTMLDetailsElement;
+    expect(detailsAfter).not.toBeNull();
+    // The control attribute must be gone — the server has opted out.
+    expect(detailsAfter.hasAttribute("lvt-preserve-attrs")).toBe(false);
+  });
+
+  it("preserves the element's children as well", () => {
+    // lvt-preserve is a full-element bail-out: attributes, children,
+    // everything stays as-is. Useful for third-party widgets that
+    // mutate their own DOM.
+    const initialTree = {
+      s: [`<div lvt-preserve class="widget">`, `</div>`],
+      0: "initial content",
+    };
+    client.updateDOM(wrapper, initialTree);
+
+    const widget = wrapper.querySelector(".widget") as HTMLElement;
+    expect(widget.textContent).toBe("initial content");
+
+    // Simulate a third-party widget mutating its own children via
+    // safe DOM methods (the livetemplate contract applies regardless
+    // of how the client-side mutation happened).
+    widget.replaceChildren();
+    const span = document.createElement("span");
+    span.textContent = "widget-modified";
+    widget.appendChild(span);
+
+    // Server sends an update that would otherwise replace the content.
+    const updateTree = { 0: "server-updated content" };
+    client.updateDOM(wrapper, updateTree);
+
+    const widgetAfter = wrapper.querySelector(".widget") as HTMLElement;
+    // The widget's own mutation survives — morphdom never touched it.
+    expect(widgetAfter.textContent).toBe("widget-modified");
+    expect(widgetAfter.querySelector("span")).not.toBeNull();
+  });
+});
diff --git a/tests/script-duplication.test.ts b/tests/script-duplication.test.ts
new file mode 100644
index 0000000..daa217d
--- /dev/null
+++ b/tests/script-duplication.test.ts
@@ -0,0 +1,100 @@
+/**
+ * Regression test for the inline <script> content duplication bug.
+ *
+ * When the reconstructed HTML contains an inline <script> tag and
+ * updateDOM sets tempWrapper.innerHTML, browsers parse the script
+ * content specially and can create phantom duplicate DOM nodes after
+ * the script boundary. morphdom then sees doubled elements and
+ * patches them into the live DOM.
+ *
+ * This test operates at the updateDOM level (tree + morphdom) to
+ * reproduce the exact conditions: a template with a <script> block
+ * followed by more HTML elements.
+ */
+
+import { LiveTemplateClient } from "../livetemplate-client";
+
+describe("inline script duplication", () => {
+  let client: LiveTemplateClient;
+  let wrapper: HTMLElement;
+
+  beforeEach(() => {
+    client = new LiveTemplateClient();
+    document.body.replaceChildren();
+    wrapper = document.createElement("div");
+    wrapper.setAttribute("data-lvt-id", "script-dup-test");
+    document.body.appendChild(wrapper);
+  });
+
+  it("elements after an inline script are NOT duplicated", () => {
+    // Initial tree: content + script + more content after.
+    // The tree shape mirrors what devbox-dash's claude.tmpl produces
+    // when chat messages are followed by a scroll-to-bottom script
+    // and then a key-grid div.
+    const tree = {
+      s: [
+        '<div class="chat">messages here</div>',
+        '<script>(function(){ /* scroll */ })();</script>',
+        '<div class="after-script">',
+        "</div>",
+      ],
+      0: "", // between chat and script (slot 0)
+      1: "", // between script and after-script (slot 1)
+      2: "unique-content-that-should-appear-once", // inside after-script
+    };
+
+    client.updateDOM(wrapper, tree);
+
+    // Count: the div.after-script should appear exactly ONCE.
+    const afterScriptDivs = wrapper.querySelectorAll(".after-script");
+    expect(afterScriptDivs.length).toBe(1);
+
+    // The unique content should appear once.
+    const textOccurrences = (wrapper.textContent || "").split(
+      "unique-content-that-should-appear-once"
+    ).length - 1;
+    expect(textOccurrences).toBe(1);
+  });
+
+  it("uppercase <SCRIPT> tag also routes through DOMParser (case-insensitive)", () => {
+    // HTML tag names are case-insensitive; <SCRIPT> must be treated the
+    // same as <script> so that the DOMParser path (which prevents phantom
+    // duplication) is used regardless of casing.
+    const tree = {
+      s: [
+        '<div class="before">before</div>',
+        '<SCRIPT>var y = 2;</SCRIPT>',
+        '<div class="after">after</div>',
+      ],
+      0: "",
+      1: "",
+    };
+
+    client.updateDOM(wrapper, tree);
+
+    expect(wrapper.querySelectorAll(".after").length).toBe(1);
+    expect(wrapper.querySelectorAll(".before").length).toBe(1);
+  });
+
+  it("a second updateDOM does not cause further duplication", () => {
+    const tree = {
+      s: [
+        '<div class="before">',
+        '</div><script>var x = 1;</script><div class="after">',
+        "</div>",
+      ],
+      0: "initial",
+      1: "initial-after",
+    };
+
+    client.updateDOM(wrapper, tree);
+    expect(wrapper.querySelectorAll(".after").length).toBe(1);
+
+    // Apply an update that changes the dynamic slot but keeps the same structure.
+    const update = { 0: "updated", 1: "updated-after" };
+    client.updateDOM(wrapper, update);
+
+    expect(wrapper.querySelectorAll(".after").length).toBe(1);
+    expect(wrapper.textContent).toContain("updated-after");
+  });
+});