@webjsdev/core 0.7.39 → 0.7.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/core",
-  "version": "0.7.39",
+  "version": "0.7.41",
   "type": "module",
   "description": "webjs core runtime - html/css tags, WebComponent base, isomorphic renderers",
   "types": "./index.d.ts",

package/src/component.js

@@ -7,10 +7,13 @@ import { Signal } from './signal.js';
 import {
   captureAuthoredChildren,
   adoptSSRAssignments,
-  attachSlotObservers,
-  detachSlotObservers,
   ensureSlotState,
   hasSlotState,
+  hasFrameworkRenderedSubtree,
+  installSlotInterception,
+  installSlotSensors,
+  teardownSlotSensors,
+  reconnectSweep,
 } from './slot.js';
 
 const isBrowser = typeof window !== 'undefined' && typeof HTMLElement !== 'undefined';
@@ -818,35 +821,69 @@ class WebComponentBase extends Base {
           `For light DOM, use global CSS or <style> in render().`
         );
       }
-      // Light-DOM slot lifecycle phase one. Three sub-paths:
+      // Light-DOM slot capture: ONCE per host lifetime (#1015). Three
+      // sub-paths, all of which resolve to "the record is populated
+      // exactly once and never re-captured":
       //
-      // a. Reconnection. Slot state already exists from a prior mount.
+      // a. Reconnection. The record already exists from a prior mount.
       //    The host still carries the rendered template DOM (plus
-      //    projected children) from before the disconnect. Skip
+      //    placed slot 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
+      //    present). Children are already inside their
       //    <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.
+      //    (injectDSD placed them). Adopt those assignments BEFORE
+      //    _performRender so we retain references to the SSR'd nodes;
+      //    the renderer's createInstance().replaceChildren() will
+      //    detach them, but the slot-apply step re-attaches 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.
+      // c. First mount, no SSR. Partition authored children into the
+      //    record before _performRender wipes the host.
+      //
+      // After capture, installSlotInterception + installSlotSensors below make
+      // native DOM writes on a mounted host live (appendChild, slot= flips,
+      // innerHTML, HTMLSlotElement.assign), so light-DOM slots match shadow DOM
+      // through the standard API.
       if (hasSlotState(this)) {
-        // (a) Reconnection. State already populated; nothing to do here.
-      } else if (this.__isHydrating()) {
+        // (a) Reconnection. Record already populated. Sweep any direct child
+        //     added by a raw bypass write while the host was disconnected (no
+        //     sensor was live to catch it), then re-arm the sensors below.
+        reconnectSweep(this);
+      } else if (
+        this.__isHydrating() ||
+        this.hasAttribute('data-wj-serialized') ||
+        hasFrameworkRenderedSubtree(this)
+      ) {
+        // (b) Framework-rendered markup, from any of three signals: boot-time
+        //     SSR hydration (the webjs-hydrate marker), the router's
+        //     data-wj-serialized stamp (applySwap marks every host in a parsed
+        //     doc, covering a snapshot restore whose serialized shape has no
+        //     projected slot to detect), or the structural detector (own
+        //     data-webjs-light[data-projection] slots, attributes only the
+        //     renderer / SSR stamps). Adopt-not-capture: capturing restored
+        //     post-hydration HTML would hoover the rendered tree into the
+        //     record and duplicate content on the next render (the #1006
+        //     shape, on the restore path).
+        this.removeAttribute('data-wj-serialized');
         ensureSlotState(this);
         adoptSSRAssignments(this);
       } else {
+        // (c) First mount with author-written children. Capture them.
         captureAuthoredChildren(this);
       }
+      // Install native-write interception AFTER capture (capture uses the
+      // host's still-native methods), then arm the sensors. Together they make
+      // appendChild / insertBefore / removeChild / innerHTML / slot= flips on a
+      // mounted light host drive the slot record, restoring full shadow-DOM
+      // parity through the standard DOM API. Interception installs once;
+      // sensors are armed on every connect and torn down on disconnect.
+      installSlotInterception(this);
+      installSlotSensors(this);
     }
 
     // Notify all controllers that the host is connected.
@@ -881,14 +918,10 @@ class WebComponentBase extends Base {
       } catch (err) {
         console.error(`[webjs] lifecycle hook threw during initial render:`, err);
       }
-      // Light-DOM slot lifecycle phase two: after the first render
-      // commits, the live <slot> elements exist. Attach mutation
-      // observers so authored-child + slot-name changes drive
-      // incremental projection. (Shadow DOM uses native slot
-      // projection; nothing to attach.)
-      if (this._renderRoot === this) {
-        attachSlotObservers(this);
-      }
+      // The renderer's slot parts place the record content as part of the
+      // commit; native DOM writes on the host (appendChild, slot= flips,
+      // innerHTML) drive the record live through the interception + sensors
+      // installed on connect. There is no WebJs-specific slot API.
     });
   }
 
@@ -929,10 +962,11 @@ class WebComponentBase extends Base {
       this.__hydrationObserver.disconnect();
       this.__hydrationObserver = null;
     }
-    // Pause slot observers. The per-host state (assignment table,
-    // pending fragments, last snapshots) is preserved so a subsequent
-    // reconnection picks up where it left off.
-    if (this._renderRoot === this) detachSlotObservers(this);
+    // Tear down the slot sensors, processing any queued records first (a bare
+    // disconnect() drops them). The per-host slot record + interception are
+    // preserved so a reconnection picks up where it left off (sensors re-arm in
+    // connectedCallback).
+    teardownSlotSensors(this);
     // Dispose the signal watcher so dependency edges drop. Without
     // this the element holds references to module-scope signals
     // (and vice versa) forever.

package/src/render-client.js

@@ -10,11 +10,28 @@ import {
   PROJECTION_FALLBACK,
   SLOT_FALLBACK_FRAG,
   SLOT_STATE,
-  scheduleProjection,
-  moveSlotChildrenToPending,
-  ensureSlotState,
+  SLOT_OWNER,
+  RENDERING,
+  applySlotAssignments,
+  rescueAssignedNodes,
+  withRendererWrites,
+  drainRendererBackstop,
 } from './slot.js';
 
+/**
+ * Open the renderer-write window on a light-DOM host while `fn` commits into
+ * it, so the host's patched slot-interception methods delegate to native and
+ * a renderer commit is never mistaken for authored content. A no-op (just runs
+ * `fn`) when `node` is not a slot host, so nested and non-host commits pay
+ * nothing. Covers the ASYNC commit paths (async directives, streaming) that
+ * run outside a synchronous render() call.
+ */
+function commitInto(node, fn) {
+  const host = node && /** @type {any} */ (node)[SLOT_STATE] ? node : null;
+  if (!host) return fn();
+  return withRendererWrites(host, fn);
+}
+
 /**
  * Client-side renderer with **fine-grained** updates.
  *
@@ -88,43 +105,67 @@ const INSTANCE = Symbol.for('webjs.instance');
  */
 export function render(value, container) {
   const host = /** @type any */ (container);
-  const prev = host[INSTANCE];
+  // Open the renderer-write window for the whole commit: every host-receiver
+  // write below (and in createInstance / updateInstance / clearInstance / all
+  // part commits they reach synchronously) then bypasses the slot interception
+  // that is patched onto a light host. This is the single discriminator
+  // between a renderer commit and an author write.
+  const prevRendering = host[RENDERING];
+  host[RENDERING] = true;
+  try {
+    const prev = host[INSTANCE];
 
-  if (isTemplate(value)) {
-    const tr = /** @type {import('./html.js').TemplateResult} */ (value);
-    if (prev && prev.strings === tr.strings) {
-      updateInstance(prev, tr.values);
-      return;
-    }
-    if (prev) clearInstance(prev, container);
+    if (isTemplate(value)) {
+      const tr = /** @type {import('./html.js').TemplateResult} */ (value);
+      if (prev && prev.strings === tr.strings) {
+        updateInstance(prev, tr.values);
+        return;
+      }
+      if (prev) clearInstance(prev, container);
+
+      // Light DOM hydration: if container has SSR content (marked by
+      // <!--webjs-hydrate-->), remove the marker and proceed with normal
+      // rendering. The content will be replaced with identical output -
+      // no visible flash because SSR and client render produce the same HTML.
+      const firstChild = container.firstChild;
+      if (firstChild && firstChild.nodeType === 8 && /** @type {Comment} */ (firstChild).data === 'webjs-hydrate') {
+        firstChild.remove();
+      }
 
-    // Light DOM hydration: if container has SSR content (marked by
-    // <!--webjs-hydrate-->), remove the marker and proceed with normal
-    // rendering. The content will be replaced with identical output -
-    // no visible flash because SSR and client render produce the same HTML.
-    const firstChild = container.firstChild;
-    if (firstChild && firstChild.nodeType === 8 && /** @type {Comment} */ (firstChild).data === 'webjs-hydrate') {
-      firstChild.remove();
+      // Pre-set the symbol to an explicit null BEFORE the commit,
+      // UNCONDITIONALLY: if createInstance throws after its replaceChildren
+      // (e.g. inside the slot-part apply loop), the finally-drain must see
+      // "rendered, no instance" (discard the commit's records), never
+      // "never rendered" (fold and corrupt) and never a STALE cleared prev
+      // instance on the template-swap path (whose bookends would misclassify
+      // the half-committed new roots as unowned and fold them).
+      host[INSTANCE] = null;
+      const inst = createInstance(tr, container);
+      host[INSTANCE] = inst;
+      return;
     }
 
-    const inst = createInstance(tr, container);
-    host[INSTANCE] = inst;
-    return;
-  }
-
-  // Non-template value: treat as a single text child.
-  if (prev) clearInstance(prev, container);
-  host[INSTANCE] = null;
-  container.replaceChildren();
-  if (value == null || value === false || value === true) return;
-  if (Array.isArray(value)) {
-    for (const v of value) {
-      const text = document.createTextNode(String(v ?? ''));
-      container.appendChild(text);
+    // Non-template value: treat as a single text child.
+    if (prev) clearInstance(prev, container);
+    host[INSTANCE] = null;
+    container.replaceChildren();
+    if (value == null || value === false || value === true) return;
+    if (Array.isArray(value)) {
+      for (const v of value) {
+        const text = document.createTextNode(String(v ?? ''));
+        container.appendChild(text);
+      }
+      return;
     }
-    return;
+    container.appendChild(document.createTextNode(String(value)));
+  } finally {
+    host[RENDERING] = prevRendering;
+    // Outermost window closing: drain this commit's childList records off the
+    // slot backstop (drainRendererBackstop processes them with a renderer-output
+    // skip when an instance exists, else discards), so the backstop never folds
+    // renderer output. Mirrors withRendererWrites, used by the async paths.
+    if (!prevRendering) drainRendererBackstop(host);
   }
-  container.appendChild(document.createTextNode(String(value)));
 }
 
 /* ================================================================
@@ -353,7 +394,7 @@ function compile(tr) {
   templateEl.innerHTML = html;
 
   // Mark every <slot> in the template for framework projection and
-  // register a SLOT part for each so projectChildren can find them on
+  // register a SLOT part for each so the slot-apply step can find them on
   // clones. This runs BEFORE assignPaths so the sentinel attributes the
   // discovery step adds are picked up in the same path-recording walk.
   discoverSlots(templateEl.content, parts);
@@ -483,9 +524,21 @@ function createInstance(tr, container) {
   // Slot parts have no value-hole to drive applyPart from the loop above.
   // Apply them once now that the fragment is inserted into the live
   // container, so each slot can locate its host by walking parents and
-  // schedule the first projection through slot.js.
+  // schedule the first projection through slot.js. Stamp each slot with the
+  // host whose TEMPLATE produced it (this container), so a FORWARDED slot
+  // (rendered here but nested inside a child component) routes to this host
+  // rather than to the child the structural walk would pick. Only an element
+  // container is a host; a fragment/shadow container leaves the structural
+  // path in place.
+  const ownerHost =
+    /** @type {any} */ (container).nodeType === 1 && /** @type {any} */ (container)[SLOT_STATE]
+      ? container
+      : null;
   for (const part of bound) {
-    if (part.kind === 'slot') applyPart(part, undefined, undefined, []);
+    if (part.kind === 'slot') {
+      if (ownerHost && part.slotEl) /** @type {any} */ (part.slotEl)[SLOT_OWNER] = ownerHost;
+      applyPart(part, undefined, undefined, []);
+    }
   }
 
   return { strings: tr.strings, bound, lastValues, startNode, endNode };
@@ -582,8 +635,11 @@ function clearInstance(inst, container) {
       }
     }
     if (p.kind === 'slot') {
+      // Detach record-owned children before the teardown disposes the
+      // slot subtree; the record keeps the refs, so a re-created slot
+      // re-places the SAME nodes (children are values, #1015).
       const host = findSlotHost(p.slotEl);
-      if (host) moveSlotChildrenToPending(host, p.slotEl);
+      if (host) rescueAssignedNodes(host, p.slotEl);
     }
   }
   /** @type any */ (container).replaceChildren();
@@ -662,20 +718,38 @@ function applyPart(part, value, _prev, allValues) {
       if (part.applied) break;
       const slotEl = part.slotEl;
       const finalize = () => {
-        part.applied = true;
         const host = findSlotHost(slotEl);
-        if (!host) return; // truly orphan slot
+        if (!host) {
+          part.applied = true;
+          return; // truly orphan slot (no owner, no structural host)
+        }
+        // A FORWARDED slot's owner is known immediately (the SLOT_OWNER
+        // stamp) but the child component has not yet PLACED the slot into
+        // the owner's subtree, so the owner's apply cannot find it yet.
+        // Re-defer until the child places it (host.contains becomes true);
+        // the child WILL place it, or the owner disconnects and the retries
+        // stop. A normal own slot is already inside its host, so this passes
+        // on the first call with no extra deferral.
+        if (!host.contains(slotEl)) {
+          if (host.isConnected) queueMicrotask(finalize);
+          else part.applied = true;
+          return;
+        }
+        part.applied = true;
         // Shadow DOM: native projection. Leave fallback in place.
         if (isInShadowRootEl(slotEl)) return;
         // Light DOM: harvest the cloned fallback into a holding
-        // fragment, then trigger projection.
+        // fragment, then place the host's slot record (#1015). The
+        // application is deferred one microtask so the documented
+        // lifecycle timing holds: firstUpdated() sees the <slot>
+        // element itself, the populated content lands right after.
         const frag = document.createDocumentFragment();
         while (slotEl.firstChild) frag.appendChild(slotEl.firstChild);
         /** @type {any} */ (slotEl)[SLOT_FALLBACK_FRAG] = frag;
-        scheduleProjection(host);
+        queueMicrotask(() => applySlotAssignments(host));
       };
       const directHost = findSlotHost(slotEl);
-      if (directHost) {
+      if (directHost && directHost.contains(slotEl)) {
         finalize();
       } else {
         queueMicrotask(finalize);
@@ -697,6 +771,10 @@ function applyPart(part, value, _prev, allValues) {
  * @returns {Element | null}
  */
 function findSlotHost(slotEl) {
+  // Template-owner stamp wins (a forwarded slot's true host), else the
+  // nearest SLOT_STATE ancestor structurally.
+  const owner = /** @type any */ (slotEl)[SLOT_OWNER];
+  if (owner && owner.isConnected) return owner;
   let p = slotEl.parentElement;
   while (p) {
     if (/** @type any */ (p)[SLOT_STATE]) return p;
@@ -719,7 +797,14 @@ function isInShadowRootEl(el) {
     const parent = n.parentNode;
     if (!parent) return false;
     if (parent === n) return false;
-    if (/** @type any */ (parent).host) return true;
+    // A real ShadowRoot is a DocumentFragment (nodeType 11) exposing its
+    // owner as `.host`. Checking `.host` truthiness ALONE misfires on
+    // ordinary elements: HTMLAnchorElement/HTMLAreaElement expose a
+    // URL-derived `.host` ('example.com'), so a slot nested inside an
+    // <a> card was misread as shadow DOM and its light-DOM application
+    // silently skipped (surfaced by #1015's removal of the redundant
+    // observer repair paths that used to mask it).
+    if (parent.nodeType === 11 && /** @type any */ (parent).host) return true;
     n = parent;
   }
   return false;
@@ -806,6 +891,22 @@ function applyChild(part, value) {
  * @param {unknown} value
  */
 function applyChildInner(part, value) {
+  // Open the renderer-write window around this commit. Most calls are
+  // synchronous inside render() (the window is already open, this nests
+  // harmlessly), but the async directive paths (until, watch, asyncAppend /
+  // asyncReplace, streaming) re-enter here from a promise / microtask OUTSIDE
+  // any render() window, so this is where those commits into a light host are
+  // marked as renderer writes rather than authored content.
+  return commitInto(part.marker && part.marker.parentNode, () =>
+    applyChildInnerRaw(part, value),
+  );
+}
+
+/**
+ * @param {Extract<BoundPart, {kind:'child'}>} part
+ * @param {unknown} value
+ */
+function applyChildInnerRaw(part, value) {
   const marker = part.marker;
 
   // unsafeHTML directive: inject raw HTML string as DOM nodes.
@@ -1059,6 +1160,16 @@ function buildDetached(tr) {
     applyPart(bound[i], tr.values[i], undefined, tr.values);
     lastValues.push(tr.values[i]);
   }
+  // Slot parts need their one-shot apply exactly like createInstance and the
+  // nested-template path. The fragment is still detached here, so the
+  // slot-part's own deferred finalize (a one-microtask retry when the parent
+  // walk cannot reach a host yet) carries it: every caller inserts the
+  // returned fragment synchronously in the same task, so the retry lands in
+  // the live tree. Without this loop a <slot> inside a repeat() / array item
+  // never finalizes and its content is never placeable.
+  for (const p of bound) {
+    if (p.kind === 'slot') applyPart(p, undefined, undefined, []);
+  }
   const outFrag = document.createDocumentFragment();
   outFrag.appendChild(startNode);
   while (frag.firstChild) outFrag.appendChild(frag.firstChild);
@@ -1503,6 +1614,35 @@ function applyCache(part, inner) {
       // Reconcile values so any state changes since detachment apply.
       updateInstance(cached.inst, tr.values);
       part.child = cached.inst;
+      // A re-attached instance may carry ALREADY-APPLIED slot parts, whose
+      // finalize will never fire again, while the host's record moved on
+      // during the stash (content for these slots was parked when an apply
+      // ran with the slot unreachable). Re-run the apply for each owning
+      // host so parked content is pulled back out. The collection walks the
+      // re-attached DOM RANGE (not the instance tree): slot parts live on
+      // whatever template level contains the <slot> (nested holes, repeat /
+      // array items, streamed chunks), so a structural DOM walk is the only
+      // shape that covers every composition uniformly. moveRange already
+      // ran, so the range is live and each slot's parent walk reaches its
+      // host.
+      const hosts = new Set();
+      for (
+        let n = cached.inst.startNode.nextSibling;
+        n && n !== cached.inst.endNode;
+        n = n.nextSibling
+      ) {
+        if (n.nodeType !== 1) continue;
+        const el = /** @type {Element} */ (n);
+        if (el.matches('slot[data-webjs-light]')) {
+          const h = findSlotHost(el);
+          if (h) hosts.add(h);
+        }
+        for (const s of el.querySelectorAll('slot[data-webjs-light]')) {
+          const h = findSlotHost(s);
+          if (h) hosts.add(h);
+        }
+      }
+      for (const h of hosts) applySlotAssignments(h);
       return;
     }
   }
@@ -1816,17 +1956,23 @@ async function consumeAsyncStream(state, part, dir) {
       const mapped = dir.mapper ? dir.mapper(result.value, i) : result.value;
       const newNodes = renderToNodes(mapped);
 
-      if (state.mode === 'replace') {
-        for (const n of state.nodes) {
-          if (n.parentNode) n.parentNode.removeChild(n);
+      // This chunk commit runs in an async loop OUTSIDE any render() window,
+      // so open the renderer-write window explicitly: without it, committing a
+      // stream chunk into a light slot host would hit the patched insertBefore /
+      // removeChild and fold the renderer's own output into `authored`.
+      commitInto(marker.parentNode, () => {
+        if (state.mode === 'replace') {
+          for (const n of state.nodes) {
+            if (n.parentNode) n.parentNode.removeChild(n);
+          }
+          state.nodes = [];
         }
-        state.nodes = [];
-      }
 
-      const frag = document.createDocumentFragment();
-      for (const n of newNodes) frag.appendChild(n);
-      marker.parentNode?.insertBefore(frag, marker);
-      state.nodes.push(...newNodes);
+        const frag = document.createDocumentFragment();
+        for (const n of newNodes) frag.appendChild(n);
+        marker.parentNode?.insertBefore(frag, marker);
+        state.nodes.push(...newNodes);
+      });
 
       i++;
     }
@@ -1854,6 +2000,15 @@ function renderToNodes(value) {
     for (let i = 0; i < tr.values.length; i++) {
       applyPart(bound[i], tr.values[i], undefined, tr.values);
     }
+    // Slot parts need their one-shot apply here too (same contract as
+    // createInstance / nested templates / buildDetached): the caller
+    // (consumeAsyncStream) inserts these nodes synchronously in the same
+    // task, so the slot-part's one-microtask finalize retry lands in the
+    // live tree. Without this, a <slot> inside streamed chunk content never
+    // finalizes and its name suppresses parking forever.
+    for (const p of bound) {
+      if (p.kind === 'slot') applyPart(p, undefined, undefined, []);
+    }
     return [...frag.childNodes];
   }
   if (Array.isArray(value)) {

package/src/render-server.js

@@ -486,6 +486,32 @@ async function injectDSD(html, ctx, ancestors = [], dev) {
       seedServerAttrs(instance, attrMap);
       applyAttrsToInstance(instance, attrMap, Cls);
       for (const [k, v] of Object.entries(propValues)) instance[k] = v;
+      // Extract the authored inner HTML BEFORE the render (the injectDSD
+      // reorder): the source scan needs no render output, and hoisting it lets
+      // the light-DOM branch below project the authored children into the
+      // rendered slots. The shadow branch is a read-only peek (its authored
+      // children stay in place for native projection, and its edit keeps the
+      // old end).
+      let authoredInner = '';
+      let closeEnd = m.index + match.length;
+      if (!selfClose) {
+        const innerStart = m.index + match.length;
+        const closeIdx = findClosingTagInString(html, innerStart, tag);
+        if (closeIdx !== -1) {
+          authoredInner = html.slice(innerStart, closeIdx);
+          const closeRe = new RegExp(`</${escapeRegex(tag)}\\s*>`, 'i');
+          const tail = html.slice(closeIdx);
+          const closeMatch = closeRe.exec(tail);
+          const closeLen = closeMatch ? closeMatch[0].length : `</${tag}>`.length;
+          closeEnd = closeIdx + closeLen;
+        } else {
+          // Unclosed in source. Take rest of html as authored content
+          // and synthesize a closing tag on output.
+          authoredInner = html.slice(innerStart);
+          closeEnd = html.length;
+        }
+      }
+      const partitioned = partitionAuthoredBySlot(authoredInner);
       // Run the pre-render lifecycle (willUpdate, controllers' hostUpdate,
       // then reflect reflect:true props) so derived state computed there is
       // correct in the SSR'd HTML, matching how lit runs the update cycle at
@@ -561,37 +587,16 @@ async function injectDSD(html, ctx, ancestors = [], dev) {
           continue;
         }
         //
-        // 1. Find the matching closing tag in the source HTML (depth-
-        //    tracked for nested same-tag elements).
-        // 2. Extract authored inner HTML, partition by slot="" attr.
-        // 3. Substitute each <slot> in the rendered output with a
+        // The authored inner HTML + slot partition were extracted BEFORE
+        // the render (the #1015 reorder, see above), so here:
+        // 1. Substitute each <slot> in the rendered output with a
         //    framework-marked <slot data-webjs-light data-projection
         //    ="actual|fallback"> element carrying projection or
         //    fallback content per first-wins rule.
-        // 4. Recursively run injectDSD on the substituted output so
+        // 2. Recursively run injectDSD on the substituted output so
         //    nested custom elements (inside projected children) get
         //    their own DSD pass.
-        let authoredInner = '';
-        let closeEnd = m.index + match.length;
-        if (!selfClose) {
-          const innerStart = m.index + match.length;
-          const closeIdx = findClosingTagInString(html, innerStart, tag);
-          if (closeIdx !== -1) {
-            authoredInner = html.slice(innerStart, closeIdx);
-            const closeRe = new RegExp(`</${escapeRegex(tag)}\\s*>`, 'i');
-            const tail = html.slice(closeIdx);
-            const closeMatch = closeRe.exec(tail);
-            const closeLen = closeMatch ? closeMatch[0].length : `</${tag}>`.length;
-            closeEnd = closeIdx + closeLen;
-          } else {
-            // Unclosed in source. Take rest of html as authored content
-            // and synthesize a closing tag on output.
-            authoredInner = html.slice(innerStart);
-            closeEnd = html.length;
-          }
-        }
-        const partitioned = partitionAuthoredBySlot(authoredInner);
-        const innerWithSlots = substituteSlotsInRender(rawInner, partitioned);
+        const innerWithSlots = substituteSlotsInRender(rawInner, partitioned, tag);
         const innerProcessed = await injectDSD(innerWithSlots, ctx, [...ancestors, instance], dev);
         edits.push({
           start: m.index,
@@ -838,9 +843,11 @@ function extractSlotAttr(attrsRaw) {
   const m = /\bslot\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i.exec(attrsRaw);
   if (!m) return null;
   const value = m[1] ?? m[2] ?? m[3] ?? '';
-  // Per shadow DOM spec, slot="" (empty) and missing slot attribute
-  // both route to the default slot.
-  return value === '' ? null : value;
+  // Per shadow DOM spec, slot="" (empty) and missing slot attribute both
+  // route to the default slot. `default` is the framework's reserved alias
+  // for it (#1015: the client record normalizes it identically, so both
+  // sides agree end to end).
+  return value === '' || value === 'default' ? null : value;
 }
 
 /**
@@ -943,11 +950,19 @@ function appendStringToMap(map, key, value) {
  * slots with the same name follow the first-wins rule per spec; later
  * same-named slots fall back regardless of available projection.
  *
+ * The `ownerTag` (the tag of the component whose template rendered these
+ * slots) is emitted as `data-wj-slot-owner` so the client resolves template
+ * ownership on hydration the same way the client renderer stamps SLOT_OWNER,
+ * which is what makes a FORWARDED slot (rendered by this component but nested
+ * inside a child) route to this component and not the child (#1023).
+ *
  * @param {string} rendered
  * @param {Map<string|null, string>} partitioned
+ * @param {string} ownerTag
  * @returns {string}
  */
-function substituteSlotsInRender(rendered, partitioned) {
+function substituteSlotsInRender(rendered, partitioned, ownerTag) {
+  const ownerAttr = ownerTag ? ` data-wj-slot-owner="${escapeAttr(ownerTag)}"` : '';
   /** @type {Set<string|null>} */
   const consumedNames = new Set();
   let result = '';
@@ -982,14 +997,19 @@ function substituteSlotsInRender(rendered, partitioned) {
         totalEnd = closeIdx + closeLen;
       }
     }
-    const projected = partitioned.get(name);
+    // `default` and `''` are the reserved aliases for the default slot
+    // (#1015), matching the client's keyOfName exactly: the LOOKUP key
+    // normalizes, while the emitted name attribute stays as authored so the
+    // output bytes are unchanged for every other app.
+    const slotKey = name === 'default' || name === '' ? null : name;
+    const projected = partitioned.get(slotKey);
     const nameAttr = name !== null ? ` name="${escapeAttr(name)}"` : '';
     const extraAttrs = otherAttrs ? ` ${otherAttrs}` : '';
-    if (projected !== undefined && !consumedNames.has(name)) {
-      consumedNames.add(name);
-      result += `<slot data-webjs-light data-projection="actual"${nameAttr}${extraAttrs}>${projected}</slot>`;
+    if (projected !== undefined && !consumedNames.has(slotKey)) {
+      consumedNames.add(slotKey);
+      result += `<slot data-webjs-light data-projection="actual"${ownerAttr}${nameAttr}${extraAttrs}>${projected}</slot>`;
     } else {
-      result += `<slot data-webjs-light data-projection="fallback"${nameAttr}${extraAttrs}>${fallback}</slot>`;
+      result += `<slot data-webjs-light data-projection="fallback"${ownerAttr}${nameAttr}${extraAttrs}>${fallback}</slot>`;
     }
     cursor = totalEnd;
     slotRe.lastIndex = totalEnd;