@webjsdev/core 0.7.65 → 0.8.0

package/src/render-client/reconciler.js

@@ -1,3 +1,4 @@
+import { nothing, noChange } from '../sentinels.js';
 import { isTemplate, MARKER } from '../html.js';
 import {
   reconcileFormAction, isBoundFormAction, ABSENT, assertSubmitterHasNoName, assertSubmitterType,
@@ -10,8 +11,9 @@ import { isLive } from '../directives.js';
 import { attrHoleValue } from '../binding-prefixes.js';
 import { RENDERING, SLOT_OWNER, SLOT_STATE, drainRendererBackstop, rescueAssignedNodes } from '../slot.js';
 import { compile, submitterActionBindings, INSTANCE } from './template-compiler.js';
+import { commitAdoption, planSlotAdoption, retargetParts } from './adopt-slots.js';
 import {
-  applyPart, bindPart, currentRenderRoot, findSlotHost, setCurrentRenderRoot, updateInstance,
+  applyPart, bindPart, currentRenderHost, setCurrentRenderHost, currentRenderRoot, findSlotHost, setCurrentRenderRoot, updateInstance,
 } from './parts.js';
 
 /**
@@ -19,8 +21,10 @@ import {
  *
  * @param {unknown} value
  * @param {Element | DocumentFragment | ShadowRoot} container
+ * @param {{host?: object}} [options]
  */
-export function render(value, container) {
+export function render(value, container, options = {}) {
+  if (value === noChange) return;
   const host = /** @type any */ (container);
   // Open the renderer-write window for the whole commit: every host-receiver
   // write below (and in createInstance / updateInstance / clearInstance / all
@@ -29,6 +33,8 @@ export function render(value, container) {
   // between a renderer commit and an author write.
   const prevRendering = host[RENDERING];
   host[RENDERING] = true;
+  const prevHost = currentRenderHost;
+  setCurrentRenderHost(options.host);
   const prevRenderRoot = currentRenderRoot;
   setCurrentRenderRoot(container);
   try {
@@ -44,12 +50,12 @@ export function render(value, 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.
+      // rendering. The content is replaced with identical output, so nothing
+      // flashes, except that the SSR slots holding projected children stay in
+      // place (createInstance, #1666), so those children never leave the page.
       const firstChild = container.firstChild;
-      if (firstChild && firstChild.nodeType === 8 && /** @type {Comment} */ (firstChild).data === 'webjs-hydrate') {
-        firstChild.remove();
-      }
+      const hydrating = !!firstChild && firstChild.nodeType === 8 && /** @type {Comment} */ (firstChild).data === 'webjs-hydrate';
+      if (hydrating) firstChild.remove();
 
       // Pre-set the symbol to an explicit null BEFORE the commit,
       // UNCONDITIONALLY: if createInstance throws after its replaceChildren
@@ -59,7 +65,7 @@ export function render(value, container) {
       // 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);
+      const inst = createInstance(tr, container, hydrating);
       host[INSTANCE] = inst;
       return;
     }
@@ -68,7 +74,7 @@ export function render(value, container) {
     if (prev) clearInstance(prev, container);
     host[INSTANCE] = null;
     container.replaceChildren();
-    if (value == null || value === false || value === true) return;
+    if (value == null || value === nothing) return;
     if (Array.isArray(value)) {
       for (const v of value) {
         const text = document.createTextNode(String(v ?? ''));
@@ -79,6 +85,7 @@ export function render(value, container) {
     container.appendChild(document.createTextNode(String(value)));
   } finally {
     setCurrentRenderRoot(prevRenderRoot);
+    setCurrentRenderHost(prevHost);
     host[RENDERING] = prevRendering;
     // Outermost window closing: drain this commit's childList records off the
     // slot backstop (drainRendererBackstop processes them with a renderer-output
@@ -307,7 +314,7 @@ function resolveHoleValue(v) {
  * @param {import('../html.js').TemplateResult} tr
  * @param {Element | DocumentFragment | ShadowRoot} container
  */
-function createInstance(tr, container) {
+function createInstance(tr, container, hydrating = false) {
   const { templateEl, parts, formActions } = compile(tr);
   const frag = /** @type DocumentFragment */ (templateEl.content.cloneNode(true));
   // Bookend markers bound the instance so we can tear it down cleanly.
@@ -315,6 +322,11 @@ function createInstance(tr, container) {
   const endNode = document.createComment(`${MARKER}e`);
 
   const bound = parts.map((p) => bindPart(p, frag));
+  // Hydration keeps the SSR slots that hold projected children, and their
+  // ancestors, in the document (#1666): the parts targeting them are pointed at
+  // the live elements now, before any applies.
+  const adoption = hydrating ? planSlotAdoption(container, frag, bound) : null;
+  if (adoption) retargetParts(adoption, bound);
   const lastValues = [];
   for (let i = 0; i < tr.values.length; i++) {
     applyPart(bound[i], tr.values[i], undefined, tr.values, reconcileFormActions);
@@ -322,7 +334,11 @@ function createInstance(tr, container) {
   }
   reconcileFormActions(formActions, bound, tr.values);
 
-  /** @type any */ (container).replaceChildren(startNode, ...frag.childNodes, endNode);
+  if (adoption) {
+    commitAdoption(adoption, /** @type {Element} */ (container), [startNode, ...frag.childNodes, endNode]);
+  } else {
+    /** @type any */ (container).replaceChildren(startNode, ...frag.childNodes, endNode);
+  }
 
   // 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
@@ -363,7 +379,7 @@ function clearInstance(inst, container) {
   // slot parts so they survive teardown of a collapsing conditional
   // fragment.
   for (const p of inst.bound) {
-    if (p.kind === 'event') p.el.removeEventListener(p.name, p.dispatcher);
+    if (p.kind === 'event') p.el.removeEventListener(p.name, p.dispatcher, p.handler);
     if (p.kind === 'element') {
       // Guarded for the same reason as the sibling in `disposeInstance`, and
       // the stakes are higher here: this is the container-level teardown

package/src/render-client/template-compiler.js

@@ -31,10 +31,10 @@ export const INSTANCE = Symbol.for('webjs.instance');
  * }} TemplateInstance
  *
  * @typedef {
- *   | { kind: 'child', marker: Comment, child?: TemplateInstance | ChildNode[] }
+ *   | { kind: 'child', marker: Comment, __eventHost?: object, child?: TemplateInstance | ChildNode[] }
  *   | { kind: 'attr', el: Element, name: string }
  *   | { kind: 'attr-mixed', el: Element, name: string, statics: string[], group: number[] }
- *   | { kind: 'event', el: Element, name: string, handler: ((e: Event) => void) | null, dispatcher: (e: Event) => void }
+ *   | { kind: 'event', el: Element, name: string, handler: (EventListenerOrEventListenerObject & AddEventListenerOptions) | null, eventHost?: object, dispatcher: (e: Event) => void }
  *   | { kind: 'prop', el: Element, name: string }
  *   | { kind: 'bool', el: Element, name: string }
  *   | { kind: 'element', el: Element, lastTarget?: any }
@@ -169,10 +169,14 @@ export function compile(tr) {
               const eq = sLast.indexOf(attrQuote);
               statics.push(eq >= 0 ? sLast.slice(0, eq) : sLast);
 
+              const specialized = isBindingPrefix(mixedAttr.name[0]);
+              if (specialized && (group.length !== 1 || statics.some((piece) => piece !== ''))) {
+                throw new Error('Event, property and boolean bindings require exactly one expression with no surrounding text.');
+              }
               parts[idx0] = {
-                kind: 'attr-mixed',
+                kind: specialized ? BINDING_PREFIXES[mixedAttr.name[0]] : 'attr-mixed',
                 path: [],
-                name: mixedAttr.name,
+                name: specialized ? mixedAttr.name.slice(1) : mixedAttr.name,
                 statics,
                 group,
               };
@@ -262,7 +266,17 @@ export function compile(tr) {
   }
 
   const templateEl = document.createElement('template');
-  templateEl.innerHTML = html;
+  if (tr.svg) {
+    // An svg`` fragment is parsed inside an <svg> wrapper so its elements
+    // land in the SVG namespace, then the wrapper is unwrapped BEFORE the
+    // slot and path walks, so every recorded path is relative to the
+    // fragment's own root, as it is for an html`` template (lit does the same).
+    templateEl.innerHTML = `<svg>${html}</svg>`;
+    const wrapper = /** @type {Element} */ (templateEl.content.firstChild);
+    wrapper.replaceWith(...wrapper.childNodes);
+  } else {
+    templateEl.innerHTML = html;
+  }
 
   // Mark every <slot> in the template for framework projection and
   // register a SLOT part for each so the slot-apply step can find them on

package/src/render-client.d.ts

@@ -1 +1,2 @@
-export function render(value: unknown, container: Element | DocumentFragment | ShadowRoot): void;
+export interface RenderOptions { host?: object; }
+export function render(value: unknown, container: Element | DocumentFragment | ShadowRoot, options?: RenderOptions): void;

package/src/render-server/compile.js

@@ -181,8 +181,10 @@ function tokenize(strings) {
     state = 'text';
   };
 
+  let bindingQuote = '';
   for (let i = 0; i < strings.length; i++) {
-    const s = strings[i];
+    const s = bindingQuote ? strings[i].slice(1) : strings[i];
+    bindingQuote = '';
     for (let j = 0; j < s.length; j++) {
       const c = s[j];
       switch (state) {
@@ -393,9 +395,21 @@ function tokenize(strings) {
         });
         state = 'in-tag';
         attrName = '';
+      } else if (state === 'attr-quoted' && BINDING_PREFIXES[attrName[0]] !== undefined) {
+        const lead = chunk.slice(attrStart);
+        if (!lead.endsWith('=' + attrQuote) || !strings[i + 1].startsWith(attrQuote)) {
+          throw new Error('Event, property and boolean bindings require exactly one expression with no surrounding text.');
+        }
+        chunk = chunk.slice(0, attrStart);
+        flush();
+        ops.push({ t: HOLE, k: ATTR, kind: BINDING_PREFIXES[attrName[0]], name: attrName.slice(1), tag: currentTag, lead: lead.slice(0, -1) });
+        bindingQuote = attrQuote;
+        state = 'in-tag';
+        attrName = '';
       } else if (state === 'attr-quoted' || state === 'attr-unquoted') {
+        const prefix = chunk.slice(attrStart);
         flush();
-        ops.push({ t: HOLE, k: VALUE, name: attrName, tag: currentTag });
+        ops.push({ t: HOLE, k: VALUE, name: attrName, tag: currentTag, quote: state === 'attr-quoted' ? attrQuote : '', prefix });
       } else {
         // A hole in a tag name, between attributes, in a close tag or a markup
         // declaration: nothing is emitted for it, as before.

package/src/render-server/expand.js

@@ -3,9 +3,10 @@ import { unsafeHTML } from '../directives.js';
 import { escapeAttr } from '../escape.js';
 import { defaultSSRErrorTemplate, browserMemberHint } from './errors.js';
 import {
-  appendReflectedAttrs, applyAttrsToInstance, consumePropAttrs, parseAttrs, seedServerAttrs,
+  applyAttrsToInstance, consumePropAttrs, parseAttrs, seedServerAttrs,
   withHostMarker,
 } from './attrs.js';
+import { serveInstanceAttrs } from './served-attrs.js';
 
 /**
  * Custom-element expansion inside the op walk (#1646): what `injectDSD`
@@ -113,10 +114,11 @@ export async function settleRender(frame) {
 }
 
 function afterRender(frame) {
-  // Surface attributes the component set up to and including render() that
-  // were not in the source tag (reflected props, an explicit setAttribute,
-  // a host mutation inside render()). Reading after render() captures all.
-  frame.opening = appendReflectedAttrs(frame.opening, frame.instance, frame.presentAttrNames);
+  // Serve the attributes as the component left them up to and including
+  // render(): one it added is appended, one it changed carries its new value,
+  // and one it removed is dropped, as lit-ssr's renderAttributes() does (see
+  // served-attrs.js). Reading after render() captures all.
+  frame.opening = serveInstanceAttrs(frame.opening, frame.instance, frame.presentAttrNames);
   // Mark LIGHT-DOM hosts for the `@layer webjs-host` display:block default.
   // Shadow hosts are NOT marked: a document-level rule on the host beats the
   // shadow tree's own `:host { display }`.
@@ -253,14 +255,39 @@ async function errorState(w, frame) {
  * The `slot` attribute value of an element's attribute text, or null when
  * absent. `slot=""` and the reserved alias `default` both mean the default
  * slot (#1015), matching the client record.
+ *
+ * The attributes are read one by one, the way the HTML tokenizer reads them,
+ * rather than by searching for `slot=`. A search has two false matches: the
+ * tail of another name (`data-slot="button"`, which every shadcn-shaped part
+ * carries, since `\b` sits between the hyphen and the `s`) and text inside a
+ * quoted value (`title="a slot=b"`). Either one routed the child to a named
+ * slot the template does not have, and the server dropped it (#1666).
  * @param {string} attrsRaw
  * @returns {string | null}
  */
 export function extractSlotAttr(attrsRaw) {
-  const m = /\bslot\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i.exec(attrsRaw);
-  if (!m) return null;
-  const value = m[1] ?? m[2] ?? m[3] ?? '';
-  return value === '' || value === 'default' ? null : value;
+  const found = findAttr(attrsRaw, 'slot');
+  if (!found) return null;
+  return found.value === '' || found.value === 'default' ? null : found.value;
+}
+
+/**
+ * Find one attribute by name in an element's attribute text, reading the
+ * attributes in order as the HTML tokenizer does, so a name that merely ENDS
+ * in `attrName` or a quoted value that mentions it never matches. Returns
+ * the value (empty for a bare attribute) and the span of the whole attribute.
+ * @param {string} attrsRaw
+ * @param {string} attrName  lowercase
+ * @returns {{ value: string, start: number, end: number } | null}
+ */
+function findAttr(attrsRaw, attrName) {
+  const attr = /([^\s"'>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;
+  let m;
+  while ((m = attr.exec(attrsRaw))) {
+    if (m[1].toLowerCase() !== attrName) continue;
+    return { value: m[2] ?? m[3] ?? m[4] ?? '', start: m.index, end: m.index + m[0].length };
+  }
+  return null;
 }
 
 /**
@@ -278,9 +305,9 @@ export function finishSlot(frame, fallback) {
   let name = null;
   let otherAttrs = '';
   if (NON_BLANK.test(attrsRaw)) {
-    const nameMatch = /\bname\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i.exec(attrsRaw);
-    name = nameMatch ? (nameMatch[1] ?? nameMatch[2] ?? nameMatch[3]) : null;
-    otherAttrs = attrsRaw.replace(/\bname\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/i, '').trim();
+    const found = findAttr(attrsRaw, 'name');
+    name = found ? found.value : null;
+    otherAttrs = (found ? attrsRaw.slice(0, found.start) + attrsRaw.slice(found.end) : attrsRaw).trim();
   }
   const slotKey = name === 'default' || name === '' ? null : name;
   const projected = owner.partition.get(slotKey);

package/src/render-server/served-attrs.js

@@ -0,0 +1,79 @@
+import { escapeAttr } from '../escape.js';
+import { decodeAttrEntities } from './text.js';
+import { appendReflectedAttrs } from './attrs.js';
+
+/**
+ * Serve a custom element's attributes as the element left them after the
+ * server pass, the way lit-ssr's `ElementRenderer.renderAttributes()` emits
+ * the instance's final attributes rather than the ones the tag was written
+ * with. The browser does the same after upgrade: an element that sets, changes
+ * or removes an attribute during its first update shows the result, so the
+ * served bytes now match the hydrated DOM instead of the source tag.
+ *
+ * Three cases, per attribute:
+ *   - one the element added is appended (`appendReflectedAttrs`, unchanged);
+ *   - one the element CHANGED is served with its new value;
+ *   - one the element REMOVED is dropped from the tag.
+ * An attribute the element left alone keeps its source text BYTE FOR BYTE
+ * (its quoting, its entity spelling, its position), so a page whose
+ * components touch nothing renders exactly as before, which the elision
+ * on-versus-off differential relies on.
+ *
+ * What stays as written, and why each is safe:
+ *   - `data-webjs-prop-*`: a parent's `.prop=${value}` binding, consumed into
+ *     the property BEFORE the instance existed (`consumePropAttrs`), so the
+ *     instance never holds it and reading it back would drop it. It is kept as
+ *     written, because the browser decodes it again on upgrade.
+ *   - `data-wj-host`: added AFTER this step by `withHostMarker`. When a
+ *     re-processed string already carries it (a streamed boundary's children),
+ *     it was seeded into the instance like any other attribute and is
+ *     unchanged, so it is kept.
+ *   - `data-wj-slot-owner`: the renderer stamps it on `<slot>` elements, not on
+ *     hosts. A host can only carry it in a re-processed string, where it was
+ *     seeded and is unchanged, so it is kept.
+ *   - an attribute that came from a template hole: by this point its value is
+ *     plain text in the opening tag, seeded like a static one, so the same
+ *     rule applies. Serving the element's value cannot desynchronize the hole:
+ *     a host inside a component's template is re-created by that component's
+ *     client render, which writes the hole's value again, and a host written
+ *     by a page or a layout never hydrates its attributes at all.
+ *
+ * @param {string} opening  the element's opening tag, `<tag attrs>`, ending in `>`
+ * @param {any} instance  the server-side instance (the element shim, or a real
+ *   `HTMLElement` when `renderToString` runs in a browser)
+ * @param {Set<string>} presentAttrNames  lowercased names already in the source tag
+ * @returns {string}
+ */
+export function serveInstanceAttrs(opening, instance, presentAttrNames) {
+  if (!instance || typeof instance.getAttribute !== 'function' || typeof instance.getAttributeNames !== 'function') return opening;
+  const nameEnd = opening.search(/[\s>]/);
+  const head = opening.slice(0, nameEnd);
+  const body = opening.slice(nameEnd, -1);
+  // The same attribute grammar `parseAttrs` reads the source with, so every
+  // name seeded into the instance is found again here.
+  const re = /([a-zA-Z_:][\w:.-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;
+  let out = '';
+  let last = 0;
+  let changed = false;
+  let m;
+  while ((m = re.exec(body)) !== null) {
+    const raw = m[0];
+    const name = m[1];
+    if (name.toLowerCase().startsWith('data-webjs-prop-')) continue;
+    const written = decodeAttrEntities(m[2] ?? m[3] ?? m[4] ?? '');
+    const now = instance.getAttribute(name);
+    if (now === written) continue;
+    changed = true;
+    if (now === null) {
+      // Removed: drop it together with the whitespace that separated it.
+      let start = m.index;
+      while (start > last && /\s/.test(body[start - 1])) start--;
+      out += body.slice(last, start);
+    } else {
+      out += body.slice(last, m.index) + (now === '' ? name : `${name}="${escapeAttr(String(now))}"`);
+    }
+    last = m.index + raw.length;
+  }
+  const rewritten = changed ? `${head}${out}${body.slice(last)}>` : opening;
+  return appendReflectedAttrs(rewritten, instance, presentAttrNames);
+}

package/src/render-server/walk.js

@@ -1,3 +1,5 @@
+import { isAttributeMap, attributeMapText } from '../attribute-directives.js';
+import { nothing, noChange } from '../sentinels.js';
 import { isTemplate } from '../html.js';
 import { attrHoleValue } from '../binding-prefixes.js';
 import { escapeText, escapeAttr } from '../escape.js';
@@ -163,7 +165,7 @@ export class Walker {
    * @param {unknown} value
    */
   async value(value) {
-    if (value == null || value === false || value === true) return;
+    if (value == null || value === nothing || value === noChange) return;
     if (typeof (/** @type any */ (value).then) === 'function') {
       return this.value(await value);
     }
@@ -300,6 +302,38 @@ export class Walker {
               await this.attr(op, val);
               break;
             case VALUE:
+              if (op.quote) {
+                // Resolve the complete attribute before emitting any of it so a
+                // sentinel in any expression can omit the entire attribute.
+                this.buf = this.buf.slice(0, -op.prefix.length);
+                let attribute = op.prefix;
+                let omitted = false;
+                let piece = val;
+                for (let j = i; j < ops.length; j++) {
+                  const next = ops[j];
+                  if (next.t === HOLE) {
+                    if (j !== i) {
+                      piece = values[vi++];
+                      if (piece && typeof piece.then === 'function') piece = await piece;
+                      if (isLive(piece)) piece = piece.value;
+                    }
+                    if (isAttributeMap(piece)) piece = attributeMapText(piece, op.name);
+                    assertNotFunctionActionAttr(piece, op.name, op.tag);
+                    if (piece === nothing) omitted = true;
+                    attribute += piece === nothing || piece === noChange ? '' : escapeAttr(String(piece ?? ''));
+                  } else if (next.t === TEXT) {
+                    const close = next.s.indexOf(op.quote);
+                    if (close >= 0) {
+                      if (!omitted) this.buf += attribute + next.s.slice(0, close + 1);
+                      this.buf += next.s.slice(close + 1);
+                      i = j;
+                      break;
+                    }
+                    attribute += next.s;
+                  }
+                }
+                break;
+              }
               // A hole inside a quoted/unquoted value, the `action="${fn}"` and
               // mixed `action="/x/${fn}"` shapes (#1154).
               assertNotFunctionActionAttr(val, op.name, op.tag);
@@ -366,6 +400,12 @@ export class Walker {
    * @param {unknown} val
    */
   async attr(op, val) {
+    if (isAttributeMap(val)) {
+      if (op.kind !== 'plain') throw new Error('classMap/styleMap require an attribute binding.');
+      val = attributeMapText(val, op.name);
+    }
+    if (val === noChange) return;
+    if (val === nothing && op.kind === 'prop') val = undefined;
     const ts = this.tagState;
     const name = /** @type string */ (op.name);
     const tag = /** @type string */ (op.tag);
@@ -412,7 +452,7 @@ export class Walker {
       // `?action=${fn}` is meaningless in every case; refusing it keeps the
       // rule true for every sigil rather than only the quoted ones.
       assertNotFunctionActionAttr(val, name, tag);
-      if (val) this.buf += `${name}=""`;
+      if (val && val !== nothing) this.buf += `${name}=""`;
       return;
     }
     // A plain `name=${value}` hole.

package/src/router-client/anchors.js

@@ -37,8 +37,10 @@ export function closestAnchor(target) {
       const a = el.closest && el.closest('a');
       if (a instanceof HTMLAnchorElement) return a;
     }
+    // Only a real ShadowRoot has a host to cross to (a detached subtree's
+    // root can be an <a>, whose `host` is a URL string).
     const root = node.getRootNode ? node.getRootNode() : null;
-    node = root && /** @type any */ (root).host ? /** @type any */ (root).host : null;
+    node = typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot ? root.host : null;
   }
   return null;
 }

package/src/router-client/boundaries.js

@@ -159,6 +159,20 @@ export function collectBoundaries(root) {
  *   live: { routeKey: string, start: Comment, end: Comment },
  *   incoming: { routeKey: string, start: Comment, end: Comment } } | null}
  */
+/**
+ * Does segment `inner` sit at or below segment `outer`. Boundary segments are
+ * nested path prefixes, so `/ui/docs` is within `/ui` and within `/`, and
+ * `/uix` is within neither `/ui` nor `/ui/docs`. The one statement of the
+ * nesting rule: the swap plan below and the stylesheet ownership in
+ * owned-styles.js both use it, so they cannot disagree about which range a
+ * segment belongs to.
+ * @param {string} inner
+ * @param {string} outer
+ */
+export function segmentWithin(inner, outer) {
+  return inner === outer || inner.startsWith(outer === '/' ? '/' : outer + '/');
+}
+
 export function planBoundarySwap(here, there) {
   // Shared segments, shallowest first (a nested path prefix is shorter).
   const shared = [...here.keys()].filter((s) => there.has(s)).sort((a, b) => a.length - b.length);
@@ -169,7 +183,7 @@ export function planBoundarySwap(here, there) {
       let parent = null;
       for (const p of shared) {
         if (p === seg) break;
-        if (seg.startsWith(p === '/' ? p : p + '/')) parent = p;
+        if (seg !== p && segmentWithin(seg, p)) parent = p;
       }
       if (!parent) return null; // no anchored parent: degrade
       return { mode: 'replace', segment: parent, live: here.get(parent), incoming: there.get(parent) };

package/src/router-client/constants.js

@@ -204,3 +204,33 @@ export function _isNonHtmlPath(pathname) {
  * alone rather than reverted.
  */
 export const WRITE_BACK_ARMED_MS = 250;
+
+/**
+ * Marks the router's temporary stylesheet copies (`stylesheets.js`). Here,
+ * in the leaf module, so `owned-styles.js` can skip those copies without
+ * importing `stylesheets.js`, which imports `head-merge.js`, which imports
+ * `owned-styles.js`.
+ */
+export const PRELOAD_ATTR = 'data-webjs-preload-style';
+
+/**
+ * Does `el`'s `rel` name a stylesheet that applies (`stylesheet`, not
+ * `alternate`). The one test both the stylesheet loader (`stylesheets.js`) and
+ * the owned-sheet merge (`owned-styles.js`) use, so the two cannot disagree.
+ * @param {Element} el
+ */
+export function relIsStylesheet(el) {
+  const rel = relTokens(el);
+  return rel.includes('stylesheet') && !rel.includes('alternate');
+}
+
+/**
+ * The lowercased tokens of `el`'s `rel`, the one parse every stylesheet test
+ * in the router builds on (`relIsStylesheet` here, and the head merge's
+ * never-remove rule, which counts an alternate stylesheet too).
+ * @param {Element} el
+ * @returns {string[]}
+ */
+export function relTokens(el) {
+  return (el.getAttribute('rel') || '').toLowerCase().split(/\s+/);
+}

package/src/router-client/fetch-apply.js

@@ -19,6 +19,7 @@ import { navigate } from './navigator.js';
 import { prefetchTake } from './prefetch.js';
 import { currentNavigationToken } from './state.js';
 import { readStreamedShell, streamBoundariesProgressively } from './stream.js';
+import { loadIncomingStylesheets, releaseIncomingStylesheets } from './stylesheets.js';
 import { _swapCommit, applySwap } from './swap.js';
 
 /**
@@ -295,6 +296,21 @@ export async function fetchAndApply(href, frameId, recordHistory, optimisticStat
   // recover in place rather than a destructive full reload.
   if (!doc) { restoreOptimistic(optimisticState); handleNavigationError(href, null, new Error('navigation response did not parse as HTML')); return { ok: false, status: respStatus, aborted: false, applied: false }; }
 
+  // Load the stylesheets the incoming page brings before it is swapped in, so
+  // its first paint is styled (see stylesheets.js). Null when it brings none,
+  // and the swap then stays in this task. A newer navigation that started
+  // during the wait owns the page, exactly as after the body read above, and
+  // this one's temporary copies go with it.
+  const sheets = loadIncomingStylesheets(doc, finalUrl || href, frameId);
+  if (sheets) {
+    await sheets.ready;
+    if (myToken !== currentNavigationToken) {
+      releaseIncomingStylesheets(sheets);
+      if (streamCtx && streamCtx.reader) { try { streamCtx.reader.cancel(); } catch { /* ignore */ } }
+      return { ok: false, status: respStatus, aborted: true, applied: false };
+    }
+  }
+
   // #1406: recording the push after the swap finalizes the outgoing page's
   // entry against the DESTINATION document, at a scroll offset the browser has
   // already clamped to that document's height (measured on the gallery: 1600 to
@@ -336,6 +352,11 @@ export async function fetchAndApply(href, frameId, recordHistory, optimisticStat
     : null;
 
   const disposition = applySwap(doc, frameId, !!revalidating, finalUrl, incomingBuild, incomingSrc, refresh || (mutation ? 'layouts' : undefined), recordHistoryNow);
+  // The temporary stylesheet copies are released once the swap has COMMITTED:
+  // under a view transition the new markup, and the page's own links with it,
+  // lands a frame later. A copy with no twin in the result (a discarded or
+  // uncommitted swap) goes as soon as the commit settles.
+  if (sheets) _swapCommit.then(() => releaseIncomingStylesheets(sheets), () => releaseIncomingStylesheets(sheets));
   // `'none'` means applySwap returned WITHOUT committing anything: the frame the
   // response was for is missing, or it degraded to a hard navigation (an
   // importmap/build mismatch, a poisoned boundary scan). The page is not left

package/src/router-client/frames.js

@@ -24,10 +24,13 @@ export function activeFrameId(el) {
   while (cur) {
     const frame = cur.closest('webjs-frame');
     if (frame && frame.id) return frame.id;
-    // Cross shadow boundary upwards if necessary.
+    // Cross a shadow boundary upwards if necessary. Only a real ShadowRoot
+    // has a host to cross to: a DETACHED element's root is the top of its
+    // own subtree, and when that is an <a>, its `host` is the URL's host
+    // STRING, which the next closest() call threw on.
     const root = cur.getRootNode();
-    if (root && /** @type any */ (root).host) {
-      cur = /** @type any */ (root).host;
+    if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) {
+      cur = root.host;
     } else {
       break;
     }