fix: MutationObserver safety net for custom element upgrades

Add a global MutationObserver that watches for any custom element
inserted into the document and calls customElements.upgrade() on it.
This catches elements that the browser fails to auto-upgrade after
DOM operations like replaceChildren — regardless of timing, View
Transitions, or microtask ordering.

Also harden new-post form submission: fall back to querySelector
for form reference, validate title/body before submitting.

Author: vivek7405

examples/blog/modules/posts/components/new-post.ts

@@ -23,14 +23,20 @@ export class NewPost extends WebComponent {
 
   async onSubmit(e: SubmitEvent) {
     e.preventDefault();
-    const form = e.currentTarget as HTMLFormElement;
+    // Use querySelector as a fallback — e.currentTarget can be null in
+    // some re-render scenarios with light DOM event delegation.
+    const form = (e.currentTarget || this.querySelector('form')) as HTMLFormElement;
+    if (!form) return;
     const data = new FormData(form);
+    const title = String(data.get('title') || '');
+    const body = String(data.get('body') || '');
+    if (!title || !body) {
+      this.setState({ error: 'Title and body are required' });
+      return;
+    }
     this.setState({ busy: true, error: null });
     try {
-      const result = await createPost({
-        title: String(data.get('title') || ''),
-        body:  String(data.get('body')  || ''),
-      });
+      const result = await createPost({ title, body });
       if (!result.success) {
         this.setState({ busy: false, error: result.error });
         return;

packages/core/src/router-client.js

@@ -50,12 +50,37 @@ function parseHTML(html) {
 
 let enabled = false;
 
+/**
+ * Global MutationObserver that upgrades any custom element inserted into the
+ * document. This is the safety net — if replaceChildren, View Transitions,
+ * or any other DOM operation inserts elements that the browser fails to
+ * auto-upgrade, this observer catches them.
+ */
+let upgradeObserver = null;
+function ensureUpgradeObserver() {
+  if (upgradeObserver || typeof MutationObserver === 'undefined' || typeof customElements === 'undefined') return;
+  upgradeObserver = new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      for (const node of m.addedNodes) {
+        if (node.nodeType !== 1) continue;
+        const el = /** @type {Element} */ (node);
+        if (el.tagName?.includes('-')) customElements.upgrade(el);
+        for (const child of el.querySelectorAll('*')) {
+          if (child.tagName?.includes('-')) customElements.upgrade(child);
+        }
+      }
+    }
+  });
+  upgradeObserver.observe(document.body, { childList: true, subtree: true });
+}
+
 /** Enable the client router. Idempotent. */
 export function enableClientRouter() {
   if (enabled || typeof document === 'undefined') return;
   enabled = true;
   document.addEventListener('click', onClick, true);
   window.addEventListener('popstate', onPopState);
+  ensureUpgradeObserver();
 }
 
 /** Disable the client router. */