fix(core): 6 browser failures fixed, all 26 browser tests pass

Four real bugs surfaced in the browser test suite and are fixed:

1. captureAuthoredChildren ran on every connectedCallback, including
   on re-connection of a previously-mounted element. The second
   capture wrongly hoovered up the host's existing rendered template
   (the marker comments + the <div> with its slot) into the
   assignment table, then the re-render's clientRender no-op'd
   because INSTANCE was cached. Result: blank slot, lost projection.
   Fix: skip capture and adoption when hasSlotState(this) is already
   true (re-connection path). State preserved through disconnect by
   detachSlotObservers (only the observers pause).

2. adoptSSRAssignments ran AFTER _performRender, but
   _performRender's clientRender calls createInstance which calls
   replaceChildren and wipes the SSR-placed children before adoption
   ever sees them. Fix: move adoptSSRAssignments to BEFORE
   _performRender so the assignment table holds Node references to
   the SSR-placed children. createInstance still wipes them from the
   host, but they remain alive via the state map, and projection
   re-attaches them to the freshly-cloned slot. DOM identity is
   preserved through the hydration round-trip.

3. Child slot=" " attribute changes were observed only with
   subtree:false, so children already projected into slot elements
   (which sit one level deeper than the host) became invisible to
   the observer. Fix: subtree:true on the MutationObserver, with
   defensive checks in the callback. childList handler still filters
   to node.parentElement === host so projection's own
   slot.appendChild deep in the tree does not re-fire the capture
   path. removedNodes still skips when host.contains(node) so
   projection moves into a slot are not mistaken for user removals.

4. The slot-part apply hook only ran inside createInstance, never
   inside applyChild's nested-template branch. A <slot> inside
   `${cond ? html\`<slot/>\` : ''}` is part of an inner template
   compiled and bound separately when the outer's child-position
   hole resolves; its parts never saw the slot-apply tail loop. Fix:
   add the same slot-apply tail loop after the nested-template's
   insertBefore so the slot's microtask retry fires and projection
   runs. Conditional collapse + re-expansion now preserves projected
   child Node identity through the pending-fragment hand-off.

Also: applyFallback no longer pushes children to the pending map.
That code was a leftover from the conditional-collapse design; the
correct path for that case lives in moveSlotChildrenToPending
(called from clearInstance). applyFallback's push was an unrelated
correctness hazard for user-initiated child removals.

The slot-part apply now retries on the next microtask when
findSlotHost returns null at first (the slot is still inside an
unattached fragment for nested templates). The retry fires after the
outer's replaceChildren, at which point parent-walk reaches the host.

Tests pass:
  26 of 26 browser cases in test/browser/slot.test.js
  51 of 51 unit cases in test/component-slot.test.js
  178 server-side unit cases across the broader sweep
     (component, render-client, render-server, directives, registry,
     css, html, context, task, suspense, repeat, testing,
     blog-smoke, json-negotiation, light-dom-ssr)

Remaining for Task 14:
  - e2e tests covering SSR + page/layout + client router (per
    user's most recent direction)
  - Convention check rule (Task 15)

Author: vivek7405

packages/core/src/component.js

@@ -7,6 +7,7 @@ import {
   attachSlotObservers,
   detachSlotObservers,
   ensureSlotState,
+  hasSlotState,
 } from './slot.js';
 
 const isBrowser = typeof window !== 'undefined' && typeof HTMLElement !== 'undefined';
@@ -388,19 +389,32 @@ export class WebComponent extends Base {
           `For light DOM, use global CSS or <style> in render().`
         );
       }
-      // Light-DOM slot lifecycle phase one. Capture authored children
-      // into the slot-state's assignment table BEFORE _performRender
-      // runs, since the renderer's first clientRender call will
-      // replaceChildren() on the host and would otherwise destroy them.
+      // Light-DOM slot lifecycle phase one. Three sub-paths:
       //
-      // Detect SSR hydration via the framework's <!--webjs-hydrate-->
-      // marker: in that case the SSR pipeline already placed projected
-      // children inside <slot data-webjs-light data-projection="actual">
-      // elements, so we ensure slot state exists (so findSlotHost
-      // succeeds) and defer to adoptSSRAssignments after the renderer
-      // has hydrated the template. Otherwise capture in place.
-      if (this.__isHydrating()) {
+      // a. Reconnection. Slot state already exists from a prior mount.
+      //    The host still carries the rendered template DOM (plus
+      //    projected children) from before the disconnect. Skip
+      //    capture (would wrongly hoover up rendered nodes) and skip
+      //    SSR adoption. clientRender will see the existing INSTANCE
+      //    and updateInstance instead of recreating; the DOM stays.
+      //
+      // b. SSR hydration (first mount, <!--webjs-hydrate--> marker
+      //    present). Children are already projected into
+      //    <slot data-webjs-light data-projection="actual"> elements
+      //    by injectDSD. Adopt those assignments BEFORE _performRender
+      //    so we retain references to the SSR'd nodes; the renderer's
+      //    createInstance().replaceChildren() will detach them, but
+      //    projection re-attaches by moving the same Node refs into
+      //    the freshly-cloned slot. DOM identity preserved through the
+      //    hydration round-trip.
+      //
+      // c. First mount, no SSR. Move authored children into the
+      //    assignment table before _performRender wipes the host.
+      if (hasSlotState(this)) {
+        // (a) Reconnection. State already populated; nothing to do here.
+      } else if (this.__isHydrating()) {
         ensureSlotState(this);
+        adoptSSRAssignments(this);
       } else {
         captureAuthoredChildren(this);
       }
@@ -418,16 +432,13 @@ export class WebComponent extends Base {
     this._performRender();
 
     // Light-DOM slot lifecycle phase two. With the rendered template
-    // (and therefore the live <slot> elements) now in the DOM, hook up
-    // the mutation observers so future authored-child mutations and
-    // slot-name changes drive incremental projection. For hydrated
-    // hosts, also adopt the SSR-placed slot assignments so the first
-    // projection pass is a no-op.
+    // (and therefore the live <slot> elements) now in the DOM, attach
+    // mutation observers so future authored-child mutations and
+    // slot-name changes drive incremental projection. Adoption of
+    // SSR-placed assignments has already happened in phase one (before
+    // _performRender) so the renderer's replaceChildren cannot destroy
+    // those nodes; projection moves them into the freshly-cloned slots.
     if (this._renderRoot === this) {
-      if (this.__hydratedAtActivate) {
-        adoptSSRAssignments(this);
-        this.__hydratedAtActivate = false;
-      }
       attachSlotObservers(this);
     }
   }

packages/core/src/render-client.js

@@ -603,10 +603,25 @@ function applyPart(part, value, _prev, allValues) {
       // been inserted into the host's render root (so the slot can find
       // its host by walking parents). Subsequent re-renders are
       // observer-driven from slot.js, not value-driven.
+      //
+      // For NESTED templates (a slot inside `${cond ? html`<slot/>` : ''}`),
+      // the slot's parent chain at apply time leads up through an
+      // unattached fragment that has not yet been inserted into the
+      // host's render root by the outer createInstance. findSlotHost
+      // returns null in that case. We retry on the next microtask, by
+      // which point the outer's replaceChildren has placed the entire
+      // tree (including this nested slot) into the host.
       if (part.applied) break;
       part.applied = true;
-      const host = findSlotHost(part.slotEl);
-      if (host) scheduleProjection(host);
+      const directHost = findSlotHost(part.slotEl);
+      if (directHost) {
+        scheduleProjection(directHost);
+      } else {
+        queueMicrotask(() => {
+          const h = findSlotHost(part.slotEl);
+          if (h) scheduleProjection(h);
+        });
+      }
       break;
     }
     case 'noop':
@@ -710,6 +725,14 @@ function applyChild(part, value) {
     }
     const nodes = [startNode, ...frag.childNodes, endNode];
     marker.parentNode?.insertBefore(nodesToFrag(nodes), marker);
+    // Slot parts in this nested template need their one-shot apply just
+    // like createInstance does for top-level templates. The slot is now
+    // in the live tree (insertBefore above) so its parent walk can
+    // reach the host. Without this loop, conditional / nested templates
+    // with <slot> inside never trigger projection.
+    for (const p of bound) {
+      if (p.kind === 'slot') applyPart(p, undefined, undefined, []);
+    }
     part.child = { strings: tr.strings, bound, lastValues, startNode, endNode };
     return;
   }

packages/core/src/slot.js

@@ -411,21 +411,35 @@ export function attachSlotObservers(host) {
         }
       } else if (r.type === 'attributes' && r.attributeName === 'slot') {
         const target = /** @type {Element} */ (r.target);
-        if (target.parentElement === host || hostOwnsAssignedNode(host, target)) {
-          if (removeFromAssignments(state, target)) {
-            appendToMap(state.assignedByName, slotNameOf(target), target);
-            dirty = true;
-          }
+        // A child's slot=" " attribute changed. If it's an authored
+        // child currently in the assignment table (either still a
+        // direct child of host or already projected into a slot deeper
+        // down), re-partition by the new name.
+        if (removeFromAssignments(state, target)) {
+          appendToMap(state.assignedByName, slotNameOf(target), target);
+          dirty = true;
+        } else if (target.parentElement === host) {
+          // Edge case where state.removeFromAssignments missed it: still
+          // direct on host and not yet captured.
+          appendToMap(state.assignedByName, slotNameOf(target), target);
+          dirty = true;
         }
       }
     }
     if (dirty) scheduleProjection(host);
   });
+  // subtree: true so children moved into <slot> deeper in the tree are
+  // still observed when their slot=" " attribute changes (which would
+  // otherwise be invisible under subtree: false). The attribute filter
+  // keeps the observed surface small. childList stays scoped to host's
+  // direct children: appending a node to host is the user-level entry
+  // point for authoring; projection's slot.appendChild is on a node
+  // deeper in the tree and the filter does not fire on those.
   state.childObserver.observe(host, {
     childList: true,
     attributes: true,
     attributeFilter: ['slot'],
-    subtree: false,
+    subtree: true,
   });
 }
 
@@ -686,11 +700,12 @@ function applyFallback(state, slot) {
     return false;
   }
 
-  const prev = state.lastSnapshot.get(slot) || [];
-  if (prev.length > 0) {
-    const lastName = slot.getAttribute('name') || null;
-    appendArrayToMap(state.pendingByName, lastName, prev);
-  }
+  // Slot transitioning from actual to fallback. This happens when the
+  // host's assignment for this slot's name is empty (e.g., user removed
+  // all matching children). Drop the lastSnapshot record; do NOT push
+  // children to the pending map (that path is for slot destruction
+  // during a conditional collapse, handled separately by
+  // moveSlotChildrenToPending).
   state.lastSnapshot.delete(slot);
   while (slot.firstChild) slot.removeChild(slot.firstChild);
   restoreFallbackInto(slot);