fix(techdemo): rebootstrap inserted islands

Keep opaque island widgets live when slhx swaps or later DOM insertion adds a new island, and tear down the listener when an island leaves the document.

req: interop/001

req: examples/001

examples/techdemo/templates/island.js

@@ -80,12 +80,18 @@
     const state = { frame: 0, snapshot: parseSnapshot(island.getAttribute("data-island-snapshot")) };
     roots.set(island, state);
 
-    rootOf(island).addEventListener("slhx:island-orbit", (event) => {
+    const root = rootOf(island);
+    const update = (event) => {
       state.snapshot = parseSnapshot(event.detail);
       island.setAttribute("data-island-snapshot", event.detail);
-    });
+    };
+    root.addEventListener("slhx:island-orbit", update);
 
     function tick() {
+      if (!document.contains(island)) {
+        root.removeEventListener("slhx:island-orbit", update);
+        return;
+      }
       state.frame += 1;
       render(canvas, readout, state);
       requestAnimationFrame(tick);
@@ -99,6 +105,18 @@
     });
   }
 
+  function bootAddedIslands(records) {
+    for (const record of records) {
+      for (const node of record.addedNodes) {
+        if (node.nodeType === 1) {
+          scan();
+          return;
+        }
+      }
+    }
+  }
+
   if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", scan);
   else scan();
+  if (typeof MutationObserver !== "undefined") new MutationObserver(bootAddedIslands).observe(document.documentElement, { childList: true, subtree: true });
 })();