From 9d0d09ca524ea4427a50e4ef9c0cb0cbde272e85 Mon Sep 17 00:00:00 2001
From: Yiming Li <yimingli.cs@gmail.com>
Date: Sat, 16 May 2026 16:31:20 +0800
Subject: [PATCH 01/12] feat(react): route element-template background tree via
 multi-slot

Element-template's background runtime now consumes Preact's __slotIndex
directly instead of going through a BackgroundElementTemplateSlot wrapper.
The SWC swc_plugin_element_template lowering emits $0, $1, ... named-slot
JSX props in place of __etSlot(N, ...) wrapper-call children, so the
main-thread renderToOpcodes and the background insertBefore/removeChild
both key insert and remove ops off the child's own slot index. The legacy
BackgroundElementTemplateSlot is kept for bundles compiled before this
change.
---
 .changeset/et-multi-slots.md                  |   7 +
 .../runtime/background/instance.test.ts       | 130 +++++++++++++++++-
 .../render/render-to-opcodes.et.test.jsx      |  40 ++++++
 .../element-template/background/document.ts   |  14 +-
 .../element-template/background/instance.ts   |  85 ++++++++++++
 .../runtime/render/render-to-opcodes.ts       |  31 ++++-
 .../crates/swc_plugin_element_template/lib.rs |  32 -----
 .../swc_plugin_element_template/lowering.rs   |  67 ++-------
 .../swc_plugin_element_template/slot.rs       |  99 -------------
 ..._handle_deeply_nested_user_components.snap |   2 +-
 ...le_interpolated_text_with_siblings_js.snap |   2 +-
 ...interpolated_text_with_siblings_lepus.snap |   2 +-
 .../should_handle_mixed_content.snap          |   2 +-
 ..._nested_structure_and_dynamic_content.snap |   2 +-
 ...should_handle_sibling_user_components.snap |   2 +-
 .../should_handle_user_component.snap         |   2 +-
 ..._arrays_with_element_slot_placeholder.snap |   2 +-
 ...y_text_attribute_and_child_text_slots.snap |   2 +-
 .../tests/element_template.rs                 |  53 +++++++
 19 files changed, 374 insertions(+), 202 deletions(-)
 create mode 100644 .changeset/et-multi-slots.md
 delete mode 100644 packages/react/transform/crates/swc_plugin_element_template/slot.rs

diff --git a/.changeset/et-multi-slots.md b/.changeset/et-multi-slots.md
new file mode 100644
index 0000000000..20187cb3dd
--- /dev/null
+++ b/.changeset/et-multi-slots.md
@@ -0,0 +1,7 @@
+---
+"@lynx-js/react": patch
+---
+
+feat(react): apply multi-slot routing to element-template background tree
+
+Element-template's background runtime now consumes Preact's `__slotIndex` directly instead of going through a `BackgroundElementTemplateSlot` wrapper. The SWC `swc_plugin_element_template` lowering emits `$0`, `$1`, ... named-slot JSX props in place of `__etSlot(N, ...)` wrapper-call children, so the main-thread `renderToOpcodes` and the background `insertBefore`/`removeChild` both key insert and remove ops off the child's own slot index. The legacy `BackgroundElementTemplateSlot` is kept for bundles compiled before this change.
diff --git a/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts b/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
index 2b9681aac3..e9b267e124 100644
--- a/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
+++ b/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
@@ -1144,12 +1144,26 @@ describe('BackgroundElementTemplateSlot Children', () => {
     expect(slotB.firstChild).toBe(text);
   });
 
-  it('does not create an element slot entry for non-slot direct children', () => {
+  it('routes non-slot direct children into elementSlots keyed by __slotIndex', () => {
     const root = new BackgroundElementTemplateInstance('element-template-view');
     const view = new BackgroundElementTemplateInstance('view');
+    // Default __slotIndex is 0, matching Preact's baseline assignment in
+    // diffElementNodes; multi-slot output reuses this without a slot wrapper.
     root.appendChild(view);
 
-    expect(root.elementSlots).toEqual([]);
+    expect(root.elementSlots).toEqual([[view]]);
+  });
+
+  it('groups non-slot direct children by __slotIndex without a slot wrapper', () => {
+    const root = new BackgroundElementTemplateInstance('element-template-view');
+    const slot0Child = new BackgroundElementTemplateInstance('view');
+    const slot1Child = new BackgroundElementTemplateInstance('text');
+    slot0Child.__slotIndex = 0;
+    slot1Child.__slotIndex = 1;
+    root.appendChild(slot0Child);
+    root.appendChild(slot1Child);
+
+    expect(root.elementSlots).toEqual([[slot0Child], [slot1Child]]);
   });
 
   it('does not create an element slot entry for slot with default partId', () => {
@@ -1161,3 +1175,115 @@ describe('BackgroundElementTemplateSlot Children', () => {
     expect(root.elementSlots).toEqual([]);
   });
 });
+
+describe('Multi-slot inserts and removes without a slot wrapper', () => {
+  beforeEach(() => {
+    globalThis.__MAIN_THREAD__ = false;
+    globalThis.__BACKGROUND__ = true;
+    backgroundElementTemplateInstanceManager.clear();
+    backgroundElementTemplateInstanceManager.nextId = 0;
+    clearEtAttrPlanMap();
+    clearEventState();
+    resetElementTemplateCommitState();
+  });
+
+  it('emits insertNode keyed by child.__slotIndex for direct attachments', () => {
+    const parent = new BackgroundElementTemplateInstance('view');
+    parent.emitCreate();
+
+    markElementTemplateHydrated();
+    globalCommitContext.ops = [];
+
+    const child = new BackgroundElementTemplateInstance('image');
+    child.setAttribute('attributeSlots', ['logo.png']);
+    child.__slotIndex = 1;
+    parent.appendChild(child);
+
+    // 1=create, 3=insertNode — both go to slot index 1 of the parent without a
+    // BackgroundElementTemplateSlot wrapper in between.
+    expect(globalCommitContext.ops).toEqual([
+      1,
+      child.instanceId,
+      'image',
+      null,
+      ['logo.png'],
+      [],
+      3,
+      parent.instanceId,
+      1,
+      child.instanceId,
+      0,
+    ]);
+  });
+
+  it('emits removeNode keyed by child.__slotIndex for direct removals', () => {
+    const parent = new BackgroundElementTemplateInstance('view');
+    const child = new BackgroundElementTemplateInstance('text');
+    child.__slotIndex = 2;
+    parent.appendChild(child);
+    parent.emitCreate();
+
+    markElementTemplateHydrated();
+    globalCommitContext.ops = [];
+
+    parent.removeChild(child);
+
+    expect(globalCommitContext.ops).toEqual([
+      4,
+      parent.instanceId,
+      2,
+      child.instanceId,
+      [child.instanceId],
+    ]);
+    expect(parent.elementSlots[2]).toEqual([]);
+  });
+
+  it('only uses beforeChild as anchor when it lives in the same slot', () => {
+    const parent = new BackgroundElementTemplateInstance('view');
+    const sameSlotAnchor = new BackgroundElementTemplateInstance('text');
+    sameSlotAnchor.__slotIndex = 0;
+    parent.appendChild(sameSlotAnchor);
+    parent.emitCreate();
+
+    markElementTemplateHydrated();
+    globalCommitContext.ops = [];
+
+    const incoming = new BackgroundElementTemplateInstance('text');
+    incoming.__slotIndex = 0;
+    parent.insertBefore(incoming, sameSlotAnchor);
+
+    // Same-slot anchor is honored: insertNode references it as beforeId.
+    expect(globalCommitContext.ops.slice(-5)).toEqual([
+      3,
+      parent.instanceId,
+      0,
+      incoming.instanceId,
+      sameSlotAnchor.instanceId,
+    ]);
+  });
+
+  it('drops cross-slot beforeChild anchors back to append-tail', () => {
+    const parent = new BackgroundElementTemplateInstance('view');
+    const crossSlotAnchor = new BackgroundElementTemplateInstance('text');
+    crossSlotAnchor.__slotIndex = 1;
+    parent.appendChild(crossSlotAnchor);
+    parent.emitCreate();
+
+    markElementTemplateHydrated();
+    globalCommitContext.ops = [];
+
+    const incoming = new BackgroundElementTemplateInstance('text');
+    incoming.__slotIndex = 0;
+    parent.insertBefore(incoming, crossSlotAnchor);
+
+    // Cross-slot anchor would corrupt the slot's order — drop to 0 so the
+    // insert appends at the slot's tail in the main-thread template.
+    expect(globalCommitContext.ops.slice(-5)).toEqual([
+      3,
+      parent.instanceId,
+      0,
+      incoming.instanceId,
+      0,
+    ]);
+  });
+});
diff --git a/packages/react/runtime/__test__/element-template/runtime/render/render-to-opcodes.et.test.jsx b/packages/react/runtime/__test__/element-template/runtime/render/render-to-opcodes.et.test.jsx
index 467224625d..68557096fc 100644
--- a/packages/react/runtime/__test__/element-template/runtime/render/render-to-opcodes.et.test.jsx
+++ b/packages/react/runtime/__test__/element-template/runtime/render/render-to-opcodes.et.test.jsx
@@ -59,6 +59,46 @@ describe('Element Template renderToOpcodes', () => {
     ]);
   });
 
+  it('emits slot opcodes for ET host nodes using $N named props', () => {
+    const Template = '_et_test_root';
+    const opcodes = renderToString(
+      <Template $0='first' $2='third' />,
+    );
+
+    const normalized = opcodes.map(item => (typeof item === 'object' ? '<vnode>' : item));
+    expect(normalized).toEqual([
+      __OpBegin,
+      '<vnode>',
+      __OpSlot,
+      0,
+      __OpText,
+      'first',
+      __OpSlot,
+      2,
+      __OpText,
+      'third',
+      __OpEnd,
+    ]);
+  });
+
+  it('prefers $N named props over legacy children when both are present', () => {
+    const Template = '_et_test_root';
+    const opcodes = renderToString(
+      <Template $0='named-zero' children={['legacy-zero']} />,
+    );
+
+    const normalized = opcodes.map(item => (typeof item === 'object' ? '<vnode>' : item));
+    expect(normalized).toEqual([
+      __OpBegin,
+      '<vnode>',
+      __OpSlot,
+      0,
+      __OpText,
+      'named-zero',
+      __OpEnd,
+    ]);
+  });
+
   it('ignores function values in render output', () => {
     expect(renderToString(() => {})).toEqual([]);
   });
diff --git a/packages/react/runtime/src/element-template/background/document.ts b/packages/react/runtime/src/element-template/background/document.ts
index 11c81d4344..f87354ba5b 100644
--- a/packages/react/runtime/src/element-template/background/document.ts
+++ b/packages/react/runtime/src/element-template/background/document.ts
@@ -12,19 +12,29 @@ import {
 
 export interface BackgroundElementTemplateDocument {
   createElement(type: string): BackgroundElementTemplateInstance;
-  createElementNS(ns: string, type: string): BackgroundElementTemplateInstance;
+  createElementNS(
+    ns: string,
+    type: string,
+    options?: unknown,
+  ): BackgroundElementTemplateInstance;
   createTextNode(text: string): BackgroundElementTemplateInstance;
 }
 
 export function setupBackgroundElementTemplateDocument(): BackgroundElementTemplateDocument {
   const doc = {
     createElement(type: string): BackgroundElementTemplateInstance {
+      // Legacy bundles still emit `<slot id=N>` wrappers; keep that path so
+      // pre-multi-slot output keeps routing children via the slot wrapper.
       if (type === 'slot') {
         return new BackgroundElementTemplateSlot();
       }
       return new BackgroundElementTemplateInstance(type);
     },
-    createElementNS(_ns: string, type: string): BackgroundElementTemplateInstance {
+    createElementNS(
+      _ns: string,
+      type: string,
+      _options?: unknown,
+    ): BackgroundElementTemplateInstance {
       if (type === 'slot') {
         return new BackgroundElementTemplateSlot();
       }
diff --git a/packages/react/runtime/src/element-template/background/instance.ts b/packages/react/runtime/src/element-template/background/instance.ts
index 66545b9b89..bcb3c8b426 100644
--- a/packages/react/runtime/src/element-template/background/instance.ts
+++ b/packages/react/runtime/src/element-template/background/instance.ts
@@ -41,6 +41,33 @@ function syncElementSlotChildren(
   parent.elementSlots[slotId] = [...children];
 }
 
+function collectMultiSlotChildrenForSlot(
+  parent: BackgroundElementTemplateInstance,
+  slotId: number,
+): BackgroundElementTemplateInstance[] {
+  const res: BackgroundElementTemplateInstance[] = [];
+  let child = parent.firstChild;
+  while (child) {
+    // Skip legacy slot wrappers; their content is projected separately so they
+    // do not participate in the multi-slot routing keyed off __slotIndex.
+    if (!(child instanceof BackgroundElementTemplateSlot) && child.__slotIndex === slotId) {
+      res.push(child);
+    }
+    child = child.nextSibling;
+  }
+  return res;
+}
+
+function syncMultiSlotChildren(
+  parent: BackgroundElementTemplateInstance,
+  slotId: number,
+): void {
+  if (slotId < 0) {
+    return;
+  }
+  parent.elementSlots[slotId] = collectMultiSlotChildrenForSlot(parent, slotId);
+}
+
 export class BackgroundElementTemplateInstance {
   public instanceId: number = 0; // Assigned by manager
   public type: string;
@@ -51,6 +78,11 @@ export class BackgroundElementTemplateInstance {
   public nextSibling: BackgroundElementTemplateInstance | null = null;
   public previousSibling: BackgroundElementTemplateInstance | null = null;
 
+  // Multi-slot routing field set by Preact via $0/$1 props. Defaults to 0 so a
+  // template that exposes a single slot keeps the legacy semantics without
+  // every Preact emission having to set it. See [[et-multi-slots]].
+  public __slotIndex: number = 0;
+
   // Shadow State for Hydration
   public attributeSlots: SerializableValue[];
   public elementSlots: BackgroundElementTemplateInstance[][] = [];
@@ -195,6 +227,34 @@ export class BackgroundElementTemplateInstance {
       return;
     }
 
+    // Multi-slot path: child sits directly under a template (no <slot> wrapper)
+    // and carries __slotIndex set by Preact via $N props.
+    if (!(child instanceof BackgroundElementTemplateSlot)) {
+      const slotId = child.__slotIndex;
+      syncMultiSlotChildren(this, slotId);
+      if (silent) {
+        return;
+      }
+      if (!this.canEmitPatch()) {
+        return;
+      }
+      // beforeChild may live in another slot — fall back to no anchor so the
+      // child appends at the slot's tail. Same-slot reference is honored.
+      const beforeId = beforeChild && !(beforeChild instanceof BackgroundElementTemplateSlot)
+          && beforeChild.__slotIndex === slotId
+        ? beforeChild.instanceId
+        : 0;
+      emitCreateRecursive(child);
+      pushOp(
+        ElementTemplateUpdateOps.insertNode,
+        this.instanceId,
+        slotId,
+        child.instanceId,
+        beforeId,
+      );
+      return;
+    }
+
     if (silent) {
       return;
     }
@@ -257,6 +317,31 @@ export class BackgroundElementTemplateInstance {
       return;
     }
 
+    // Multi-slot path mirror of insertBefore: child carries __slotIndex and the
+    // op references (this, slotId, child) directly with no slot wrapper.
+    if (!(child instanceof BackgroundElementTemplateSlot)) {
+      const slotId = child.__slotIndex;
+      syncMultiSlotChildren(this, slotId);
+      if (silent) {
+        return;
+      }
+      if (!this.canEmitPatch()) {
+        if (child.isPendingCreate()) {
+          child.tearDown();
+        }
+        return;
+      }
+      pushOp(
+        ElementTemplateUpdateOps.removeNode,
+        this.instanceId,
+        slotId,
+        child.instanceId,
+        collectElementTemplateSubtreeHandleIds(child),
+      );
+      markRemovedSubtreeForCurrentCommit(child);
+      return;
+    }
+
     if (silent) {
       return;
     }
diff --git a/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts b/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts
index 9c6088d009..a231728ff0 100644
--- a/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts
+++ b/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts
@@ -252,11 +252,32 @@ function renderCompiledEtHostVNode(vnode, props, context, opcodes) {
     opcodes.push(__OpAttr, 'attributeSlots', attributeSlots);
   }
 
-  // ET host nodes are compiler-generated and encode dynamic element slots in
-  // `children`, so the runtime can interpret the prop as a slot array directly.
-  const elementSlots = props.children;
-  if (elementSlots !== undefined) {
-    renderEtSlotArray(elementSlots, context, vnode, opcodes);
+  // Multi-slot output emits one prop per slot keyed `$N`. Collect them sparsely
+  // so a missing `$1` between `$0` and `$2` still routes the third entry to
+  // slot index 2 on the background side.
+  let namedSlotChildren;
+  let hasNamedSlotChildren = false;
+  for (const name in props) {
+    if (typeof name !== 'string' || name.charCodeAt(0) !== 36 /* '$' */) {
+      continue;
+    }
+    const slotId = +name.slice(1);
+    if (!(slotId >= 0)) {
+      continue;
+    }
+    (namedSlotChildren ??= [])[slotId] = props[name];
+    hasNamedSlotChildren = true;
+  }
+
+  if (hasNamedSlotChildren) {
+    renderEtSlotArray(namedSlotChildren, context, vnode, opcodes);
+  } else {
+    // Legacy ET host nodes still encode dynamic element slots in `children`,
+    // so the runtime can interpret the prop as a slot array directly.
+    const elementSlots = props.children;
+    if (elementSlots !== undefined) {
+      renderEtSlotArray(elementSlots, context, vnode, opcodes);
+    }
   }
 
   cleanupVNode(vnode);
diff --git a/packages/react/transform/crates/swc_plugin_element_template/lib.rs b/packages/react/transform/crates/swc_plugin_element_template/lib.rs
index 7df29460d4..85451868f0 100644
--- a/packages/react/transform/crates/swc_plugin_element_template/lib.rs
+++ b/packages/react/transform/crates/swc_plugin_element_template/lib.rs
@@ -21,7 +21,6 @@ mod asset;
 mod attr_name;
 mod extractor;
 mod lowering;
-mod slot;
 mod template_attribute;
 mod template_definition;
 mod template_slot;
@@ -140,8 +139,6 @@ where
   template_counter: u32,
   current_template_defs: Vec<ModuleItem>,
   comments: Option<C>,
-  slot_ident: Ident,
-  used_slot: bool,
 }
 
 impl<C> JSXTransformer<C>
@@ -195,8 +192,6 @@ where
       template_counter: 0,
       current_template_defs: vec![],
       comments,
-      slot_ident: private_ident!("__etSlot"),
-      used_slot: false,
     }
   }
 
@@ -491,32 +486,5 @@ where
         })),
       );
     }
-
-    if self.used_slot {
-      prepend_stmt(
-        &mut n.body,
-        ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl {
-          span: DUMMY_SP,
-          specifiers: vec![ImportSpecifier::Named(ImportNamedSpecifier {
-            span: DUMMY_SP,
-            local: self.slot_ident.clone(),
-            imported: Some(ModuleExportName::Ident(Ident::new(
-              "__etSlot".into(),
-              DUMMY_SP,
-              SyntaxContext::default(),
-            ))),
-            is_type_only: false,
-          })],
-          src: Box::new(Str {
-            span: DUMMY_SP,
-            raw: None,
-            value: internal_runtime_pkg(&self.cfg.runtime_pkg).into(),
-          }),
-          type_only: Default::default(),
-          with: Default::default(),
-          phase: ImportPhase::Evaluation,
-        })),
-      );
-    }
   }
 }
diff --git a/packages/react/transform/crates/swc_plugin_element_template/lowering.rs b/packages/react/transform/crates/swc_plugin_element_template/lowering.rs
index f797336b8f..b3a1ef12a7 100644
--- a/packages/react/transform/crates/swc_plugin_element_template/lowering.rs
+++ b/packages/react/transform/crates/swc_plugin_element_template/lowering.rs
@@ -3,12 +3,11 @@ use swc_core::{
   ecma::ast::*,
   quote,
 };
-use swc_plugins_shared::{jsx_helpers::jsx_children_to_expr, target::TransformTarget};
+use swc_plugins_shared::target::TransformTarget;
 
 use super::{
   attr_name::AttrName,
   extractor::{DynamicAttributePart, DynamicElementPart},
-  slot::{expr_to_jsx_child, lower_lepus_et_children_expr, wrap_in_slot},
   JSXTransformer,
 };
 
@@ -29,9 +28,12 @@ where
     dynamic_attrs: Vec<DynamicAttributePart>,
     dynamic_children: Vec<DynamicElementPart>,
   ) -> LoweredRuntimeJsx {
-    let mut rendered_slot_children: Vec<JSXElementChild> = vec![];
     let mut attr_slot_values: Vec<Option<ExprOrSpread>> = vec![];
     let mut rendered_attrs: Vec<JSXAttrOrSpread> = vec![];
+    // Multi-slot output: one `$N` attribute per dynamic element slot. Replaces
+    // the legacy `__etSlot(N, ...)` wrapper children so Preact routes each
+    // dynamic child to its slot via `__slotIndex` without an intermediate
+    // `<slot>` wrapper on the background tree.
 
     if let Some(key) = key {
       rendered_attrs.push(JSXAttrOrSpread::JSXAttr(JSXAttr {
@@ -83,45 +85,6 @@ where
       }
     }
 
-    match (dynamic_children.len(), dynamic_children.first()) {
-      (0, _) => {}
-      (1, Some(DynamicElementPart::Slot(expr, 0))) => {
-        let child = expr_to_jsx_child(expr.clone());
-        if target != TransformTarget::LEPUS {
-          self.used_slot = true;
-        }
-        rendered_slot_children.push(wrap_in_slot(&self.slot_ident, 0, vec![child]));
-      }
-      _ => {
-        for dynamic_child in dynamic_children {
-          match dynamic_child {
-            DynamicElementPart::ListSlot(expr, element_index) => {
-              let child = expr_to_jsx_child(expr);
-              if target != TransformTarget::LEPUS {
-                self.used_slot = true;
-              }
-              rendered_slot_children.push(wrap_in_slot(
-                &self.slot_ident,
-                element_index,
-                vec![child],
-              ));
-            }
-            DynamicElementPart::Slot(expr, element_index) => {
-              let child = expr_to_jsx_child(expr);
-              if target != TransformTarget::LEPUS {
-                self.used_slot = true;
-              }
-              rendered_slot_children.push(wrap_in_slot(
-                &self.slot_ident,
-                element_index,
-                vec![child],
-              ));
-            }
-          }
-        }
-      }
-    }
-
     if !attr_slot_values.is_empty() {
       rendered_attrs.push(JSXAttrOrSpread::JSXAttr(JSXAttr {
         span: DUMMY_SP,
@@ -136,27 +99,25 @@ where
       }));
     }
 
-    if target == TransformTarget::LEPUS && !rendered_slot_children.is_empty() {
-      let children_expr = jsx_children_to_expr(rendered_slot_children);
-      let lowered_children_expr = lower_lepus_et_children_expr(children_expr, &self.slot_ident)
-        .expect("LEPUS ET children should already be lowered to slot arrays");
+    for dynamic_child in dynamic_children {
+      let (slot_index, expr) = match dynamic_child {
+        DynamicElementPart::Slot(expr, idx) | DynamicElementPart::ListSlot(expr, idx) => {
+          (idx, expr)
+        }
+      };
       rendered_attrs.push(JSXAttrOrSpread::JSXAttr(JSXAttr {
         span: DUMMY_SP,
-        name: JSXAttrName::Ident(IdentName::new("children".into(), DUMMY_SP)),
+        name: JSXAttrName::Ident(IdentName::new(format!("${}", slot_index).into(), DUMMY_SP)),
         value: Some(JSXAttrValue::JSXExprContainer(JSXExprContainer {
           span: DUMMY_SP,
-          expr: JSXExpr::Expr(Box::new(lowered_children_expr)),
+          expr: JSXExpr::Expr(Box::new(expr)),
         })),
       }));
-      return LoweredRuntimeJsx {
-        attrs: rendered_attrs,
-        children: vec![],
-      };
     }
 
     LoweredRuntimeJsx {
       attrs: rendered_attrs,
-      children: rendered_slot_children,
+      children: vec![],
     }
   }
 }
diff --git a/packages/react/transform/crates/swc_plugin_element_template/slot.rs b/packages/react/transform/crates/swc_plugin_element_template/slot.rs
deleted file mode 100644
index c9a2fc8219..0000000000
--- a/packages/react/transform/crates/swc_plugin_element_template/slot.rs
+++ /dev/null
@@ -1,99 +0,0 @@
-use swc_core::{common::DUMMY_SP, ecma::ast::*, quote};
-use swc_plugins_shared::jsx_helpers::jsx_children_to_expr;
-
-use super::i32_to_expr;
-
-pub(super) fn wrap_in_slot(
-  slot_ident: &Ident,
-  id: i32,
-  children: Vec<JSXElementChild>,
-) -> JSXElementChild {
-  // ET dynamic children are transported as indexed element slots. Keeping the
-  // marker in JSX form lets the later React lowering decide the final JS shape
-  // without losing slot identity.
-  let children_expr = jsx_children_to_expr(children);
-  JSXElementChild::JSXExprContainer(JSXExprContainer {
-    span: DUMMY_SP,
-    expr: JSXExpr::Expr(Box::new(quote!(
-      "$slot_ident($id, $children_expr)" as Expr,
-      slot_ident: Ident = slot_ident.clone(),
-      id: Expr = i32_to_expr(&id),
-      children_expr: Expr = children_expr,
-    ))),
-  })
-}
-
-pub(super) fn expr_to_jsx_child(expr: Expr) -> JSXElementChild {
-  match expr {
-    Expr::JSXElement(jsx) => JSXElementChild::JSXElement(jsx),
-    _ => JSXElementChild::JSXExprContainer(JSXExprContainer {
-      span: DUMMY_SP,
-      expr: JSXExpr::Expr(Box::new(expr)),
-    }),
-  }
-}
-
-fn unwrap_et_slot_expr(expr: &Expr, slot_ident: &Ident) -> Option<(usize, Expr)> {
-  let Expr::Call(call_expr) = expr else {
-    return None;
-  };
-  let Callee::Expr(callee) = &call_expr.callee else {
-    return None;
-  };
-  let Expr::Ident(ident) = &**callee else {
-    return None;
-  };
-  if ident.sym != slot_ident.sym {
-    return None;
-  }
-  if call_expr.args.len() != 2 {
-    return None;
-  }
-
-  let slot_id = match &*call_expr.args[0].expr {
-    Expr::Lit(Lit::Num(Number { value, .. })) if *value >= 0.0 => *value as usize,
-    _ => return None,
-  };
-
-  Some((slot_id, *call_expr.args[1].expr.clone()))
-}
-
-fn build_et_slot_array_expr(entries: Vec<(usize, Expr)>) -> Expr {
-  let mut slots: Vec<Option<ExprOrSpread>> = vec![];
-
-  for (slot_id, child_expr) in entries {
-    if slots.len() <= slot_id {
-      slots.resize(slot_id + 1, None);
-    }
-    slots[slot_id] = Some(ExprOrSpread {
-      spread: None,
-      expr: Box::new(child_expr),
-    });
-  }
-
-  Expr::Array(ArrayLit {
-    span: DUMMY_SP,
-    elems: slots,
-  })
-}
-
-pub(super) fn lower_lepus_et_children_expr(expr: Expr, slot_ident: &Ident) -> Option<Expr> {
-  // LEPUS host components receive children through a plain slot array. JS output
-  // can keep nested JSX children, but LEPUS needs the marker calls collapsed here
-  // so the main-thread ET runtime reads the same elementSlotIndex ordering as the
-  // compiled Template Definition.
-  let slot_entries = match expr {
-    Expr::Call(_) => vec![unwrap_et_slot_expr(&expr, slot_ident)?],
-    Expr::Array(array) => array
-      .elems
-      .iter()
-      .map(|elem| {
-        let elem = elem.as_ref()?;
-        unwrap_et_slot_expr(&elem.expr, slot_ident)
-      })
-      .collect::<Option<Vec<_>>>()?,
-    _ => return None,
-  };
-
-  Some(build_et_slot_array_expr(slot_entries))
-}
diff --git a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_deeply_nested_user_components.snap b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_deeply_nested_user_components.snap
index edcc837de8..1441cab215 100644
--- a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_deeply_nested_user_components.snap
+++ b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_deeply_nested_user_components.snap
@@ -3,7 +3,7 @@ source: packages/react/transform/crates/swc_plugin_element_template/tests/elemen
 expression: "serde_json::json!({\n    \"code\": code, \"templates\": template_snapshot_json(&templates),\n})"
 ---
 {
-  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_2 = \"_et_da39a_test_2\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 children={[\n    <Outer title={title}>\n        <Middle enabled={enabled}>\n          <Inner count={count}>\n            <_et_da39a_test_2/>\n          </Inner>\n        </Middle>\n      </Outer>\n]}/>;\n",
+  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_2 = \"_et_da39a_test_2\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 $0={<Outer title={title}>\n        <Middle enabled={enabled}>\n          <Inner count={count}>\n            <_et_da39a_test_2/>\n          </Inner>\n        </Middle>\n      </Outer>}/>;\n",
   "templates": [
     {
       "template_id": "_et_da39a_test_2",
diff --git a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_interpolated_text_with_siblings_js.snap b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_interpolated_text_with_siblings_js.snap
index c8485aaf5b..6856465165 100644
--- a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_interpolated_text_with_siblings_js.snap
+++ b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_interpolated_text_with_siblings_js.snap
@@ -3,7 +3,7 @@ source: packages/react/transform/crates/swc_plugin_element_template/tests/elemen
 expression: "serde_json::json!({\n    \"code\": code, \"templates\": template_snapshot_json(&templates),\n})"
 ---
 {
-  "code": "import { __etSlot as __etSlot } from \"@lynx-js/react/internal\";\nimport * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_2 = \"_et_da39a_test_2\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1>{__etSlot(0, items)}{__etSlot(1, items.map((item)=><_et_da39a_test_2>{__etSlot(0, item)}</_et_da39a_test_2>))}</_et_da39a_test_1>;\n",
+  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_2 = \"_et_da39a_test_2\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 $0={items} $1={items.map((item)=><_et_da39a_test_2 $0={item}/>)}/>;\n",
   "templates": [
     {
       "template_id": "_et_da39a_test_2",
diff --git a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_interpolated_text_with_siblings_lepus.snap b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_interpolated_text_with_siblings_lepus.snap
index daaf2376ab..6856465165 100644
--- a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_interpolated_text_with_siblings_lepus.snap
+++ b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_interpolated_text_with_siblings_lepus.snap
@@ -3,7 +3,7 @@ source: packages/react/transform/crates/swc_plugin_element_template/tests/elemen
 expression: "serde_json::json!({\n    \"code\": code, \"templates\": template_snapshot_json(&templates),\n})"
 ---
 {
-  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_2 = \"_et_da39a_test_2\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 children={[\n    items,\n    items.map((item)=><_et_da39a_test_2 children={[\n            item\n        ]}/>)\n]}/>;\n",
+  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_2 = \"_et_da39a_test_2\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 $0={items} $1={items.map((item)=><_et_da39a_test_2 $0={item}/>)}/>;\n",
   "templates": [
     {
       "template_id": "_et_da39a_test_2",
diff --git a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_mixed_content.snap b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_mixed_content.snap
index ffe8095310..23159f8782 100644
--- a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_mixed_content.snap
+++ b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_mixed_content.snap
@@ -3,7 +3,7 @@ source: packages/react/transform/crates/swc_plugin_element_template/tests/elemen
 expression: "serde_json::json!({\n    \"code\": code, \"templates\": template_snapshot_json(&templates),\n})"
 ---
 {
-  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 children={[\n    dynamicPart\n]}/>;\n",
+  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 $0={dynamicPart}/>;\n",
   "templates": [
     {
       "template_id": "_et_da39a_test_1",
diff --git a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_nested_structure_and_dynamic_content.snap b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_nested_structure_and_dynamic_content.snap
index d8fef64a51..a9a2539dc7 100644
--- a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_nested_structure_and_dynamic_content.snap
+++ b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_nested_structure_and_dynamic_content.snap
@@ -3,7 +3,7 @@ source: packages/react/transform/crates/swc_plugin_element_template/tests/elemen
 expression: "serde_json::json!({\n    \"code\": code, \"templates\": template_snapshot_json(&templates),\n})"
 ---
 {
-  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_2 = \"_et_da39a_test_2\";\nconst _et_da39a_test_3 = \"_et_da39a_test_3\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 children={[\n    items.map((item)=><_et_da39a_test_2 children={[\n            item\n        ]}/>),\n    showCopyright && <_et_da39a_test_3/>\n]}/>;\n",
+  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_2 = \"_et_da39a_test_2\";\nconst _et_da39a_test_3 = \"_et_da39a_test_3\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 $0={items.map((item)=><_et_da39a_test_2 $0={item}/>)} $1={showCopyright && <_et_da39a_test_3/>}/>;\n",
   "templates": [
     {
       "template_id": "_et_da39a_test_2",
diff --git a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_sibling_user_components.snap b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_sibling_user_components.snap
index 31be28b4b4..f2f801faeb 100644
--- a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_sibling_user_components.snap
+++ b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_sibling_user_components.snap
@@ -3,7 +3,7 @@ source: packages/react/transform/crates/swc_plugin_element_template/tests/elemen
 expression: "serde_json::json!({\n    \"code\": code, \"templates\": template_snapshot_json(&templates),\n})"
 ---
 {
-  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_2 = \"_et_da39a_test_2\";\nconst _et_da39a_test_3 = \"_et_da39a_test_3\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 children={[\n    [\n        <Component>\n        <_et_da39a_test_2/>\n      </Component>,\n        <Component>\n        <_et_da39a_test_3/>\n      </Component>\n    ]\n]}/>;\n",
+  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_2 = \"_et_da39a_test_2\";\nconst _et_da39a_test_3 = \"_et_da39a_test_3\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 $0={[\n    <Component>\n        <_et_da39a_test_2/>\n      </Component>,\n    <Component>\n        <_et_da39a_test_3/>\n      </Component>\n]}/>;\n",
   "templates": [
     {
       "template_id": "_et_da39a_test_2",
diff --git a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_user_component.snap b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_user_component.snap
index 721aaf1c6b..23820ef742 100644
--- a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_user_component.snap
+++ b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_handle_user_component.snap
@@ -3,7 +3,7 @@ source: packages/react/transform/crates/swc_plugin_element_template/tests/elemen
 expression: "serde_json::json!({\n    \"code\": code, \"templates\": template_snapshot_json(&templates),\n})"
 ---
 {
-  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_2 = \"_et_da39a_test_2\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 children={[\n    <Component id={1}>\n        <_et_da39a_test_2/>\n      </Component>\n]}/>;\n",
+  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_2 = \"_et_da39a_test_2\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 $0={<Component id={1}>\n        <_et_da39a_test_2/>\n      </Component>}/>;\n",
   "templates": [
     {
       "template_id": "_et_da39a_test_2",
diff --git a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_isolate_arrays_with_element_slot_placeholder.snap b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_isolate_arrays_with_element_slot_placeholder.snap
index 57f1b70078..cca999cbad 100644
--- a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_isolate_arrays_with_element_slot_placeholder.snap
+++ b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_isolate_arrays_with_element_slot_placeholder.snap
@@ -3,7 +3,7 @@ source: packages/react/transform/crates/swc_plugin_element_template/tests/elemen
 expression: "serde_json::json!({\n    \"code\": code, \"templates\": template_snapshot_json(&templates),\n})"
 ---
 {
-  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 children={[\n    [\n        \"a\",\n        \"b\"\n    ],\n    [\n        \"c\",\n        \"d\"\n    ]\n]}/>;\n",
+  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 $0={[\n    \"a\",\n    \"b\"\n]} $1={[\n    \"c\",\n    \"d\"\n]}/>;\n",
   "templates": [
     {
       "template_id": "_et_da39a_test_1",
diff --git a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_verify_text_attribute_and_child_text_slots.snap b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_verify_text_attribute_and_child_text_slots.snap
index 46bd68a03a..5ee833efc7 100644
--- a/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_verify_text_attribute_and_child_text_slots.snap
+++ b/packages/react/transform/crates/swc_plugin_element_template/tests/__combined_snapshots__/should_verify_text_attribute_and_child_text_slots.snap
@@ -3,7 +3,7 @@ source: packages/react/transform/crates/swc_plugin_element_template/tests/elemen
 expression: "serde_json::json!({\n    \"code\": code, \"templates\": template_snapshot_json(&templates),\n})"
 ---
 {
-  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 attributeSlots={[\n    dynamicText\n]} children={[\n    dynamicText2\n]}/>;\n",
+  "code": "import * as ReactLynx from \"@lynx-js/react\";\nconst _et_da39a_test_1 = \"_et_da39a_test_1\";\n<_et_da39a_test_1 attributeSlots={[\n    dynamicText\n]} $0={dynamicText2}/>;\n",
   "templates": [
     {
       "template_id": "_et_da39a_test_1",
diff --git a/packages/react/transform/crates/swc_plugin_element_template/tests/element_template.rs b/packages/react/transform/crates/swc_plugin_element_template/tests/element_template.rs
index c83b2722d3..1c259d3a4b 100644
--- a/packages/react/transform/crates/swc_plugin_element_template/tests/element_template.rs
+++ b/packages/react/transform/crates/swc_plugin_element_template/tests/element_template.rs
@@ -705,6 +705,59 @@ fn should_report_page_element_as_unsupported() {
   );
 }
 
+#[test]
+fn should_emit_named_slot_props_instead_of_slot_wrapper_children() {
+  let (code, _) = transform_to_code_and_templates(
+    r#"
+      <view class="wrapper">
+        <view>{items.map(item => <text>{item}</text>)}</view>
+        <view>{showCopyright && <text>Copyright</text>}</view>
+      </view>
+    "#,
+    element_template_config(),
+  );
+
+  // Multi-slot output: each dynamic child becomes a `$N` prop on the host
+  // template, replacing the old `__etSlot(N, ...)` wrapper-call children.
+  assert!(
+    code.contains("$0="),
+    "expected $0= named-slot prop in output, got:\n{code}"
+  );
+  assert!(
+    code.contains("$1="),
+    "expected $1= named-slot prop in output, got:\n{code}"
+  );
+  assert!(
+    !code.contains("__etSlot"),
+    "expected no __etSlot wrapper calls in multi-slot output, got:\n{code}"
+  );
+  assert!(
+    !code.contains("children={["),
+    "expected no LEPUS-style children array fallback, got:\n{code}"
+  );
+}
+
+#[test]
+fn should_emit_named_slot_for_lepus_target() {
+  let (code, _) = transform_to_code_and_templates(
+    r#"
+      <view>{items.map(item => <text>{item}</text>)}</view>
+    "#,
+    element_template_config_for_target(TransformTarget::LEPUS),
+  );
+
+  // LEPUS target shares the multi-slot lowering — render-to-opcodes.ts
+  // iterates the $N props directly without a children-array fallback.
+  assert!(
+    code.contains("$0="),
+    "expected $0= named-slot prop in LEPUS output, got:\n{code}"
+  );
+  assert!(
+    !code.contains("__etSlot"),
+    "expected LEPUS output to not import __etSlot, got:\n{code}"
+  );
+}
+
 #[test]
 fn should_report_invalid_jsx_css_id_as_diagnostic() {
   let (_, _, diagnostics) = transform_to_code_templates_and_diagnostics(

From 72db3485640f1607714b5c7f0cd7d7d9fcff2c26 Mon Sep 17 00:00:00 2001
From: Yiming Li <yimingli.cs@gmail.com>
Date: Sat, 16 May 2026 17:08:29 +0800
Subject: [PATCH 02/12] test(react): update element-template fixtures for
 multi-slot output

Regenerated via `UPDATE=1 pnpm vitest` after the multi-slot lowering:
- `render/*/index.js.txt` switch `children: [...]` to `$0: ...`/`$N: ...` JSX props.
- `background/render/.../output.txt` drops the `<slot id=N>` wrappers from the
  background tree serialization.
- `patch-compiled/*/ops.txt` and `hydrate/.../output.txt` reflect the new
  instance-id ordering now that slot wrappers are no longer registered.
---
 .../output.txt                                | 18 +++++----------
 .../output.txt                                |  4 ++--
 .../output.txt                                |  4 ++--
 .../children.mixed-operations/output.txt      |  4 ++--
 .../output.txt                                |  4 ++--
 .../output.txt                                |  4 ++--
 .../ops.txt                                   |  4 ++--
 .../apply-hydration-ops/ops.txt               |  4 ++--
 .../render/child-siblings/index.js.txt        | 20 +++++++----------
 .../component-slot-content/index.js.txt       | 12 ++++------
 .../fixtures/render/component/index.js.txt    |  8 +++----
 .../render/mapped-view-children/index.js.txt  | 16 +++++---------
 .../render/mixed-children/index.js.txt        |  8 +++----
 .../render/multiple-text/index.js.txt         | 22 +++++++------------
 .../render/nested-templates/index.js.txt      | 12 ++++------
 .../render/react-example/index.js.txt         | 22 +++++++++----------
 16 files changed, 66 insertions(+), 100 deletions(-)

diff --git a/packages/react/runtime/__test__/element-template/fixtures/background/render/supports-slot-component-materiality/output.txt b/packages/react/runtime/__test__/element-template/fixtures/background/render/supports-slot-component-materiality/output.txt
index d755935f47..a3b8e819e1 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/background/render/supports-slot-component-materiality/output.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/background/render/supports-slot-component-materiality/output.txt
@@ -1,18 +1,12 @@
 Object {
   "tree": "<root>
   <_et_a94a8_test_3>
-    <slot id=0>
-      <_et_a94a8_test_2>
-        <slot id=0>
-          <_et_a94a8_test_4 />
-        </slot>
-      </_et_a94a8_test_2>
-      <_et_a94a8_test_2>
-        <slot id=0>
-          <_et_a94a8_test_5 />
-        </slot>
-      </_et_a94a8_test_2>
-    </slot>
+    <_et_a94a8_test_2>
+      <_et_a94a8_test_4 />
+    </_et_a94a8_test_2>
+    <_et_a94a8_test_2>
+      <_et_a94a8_test_5 />
+    </_et_a94a8_test_2>
   </_et_a94a8_test_3>
 </root>
 ",
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.creates-and-inserts-new/output.txt b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.creates-and-inserts-new/output.txt
index 8f737af5f6..425a5c230b 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.creates-and-inserts-new/output.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.creates-and-inserts-new/output.txt
@@ -1,7 +1,7 @@
 Object {
   "stream": Array [
     1,
-    4,
+    3,
     "_et_77307_test_2",
     null,
     Array [],
@@ -9,7 +9,7 @@ Object {
     3,
     -1,
     0,
-    4,
+    3,
     0,
   ],
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.inserts-before-existing-sibling/output.txt b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.inserts-before-existing-sibling/output.txt
index 27dc92a194..9c533daae5 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.inserts-before-existing-sibling/output.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.inserts-before-existing-sibling/output.txt
@@ -1,7 +1,7 @@
 Object {
   "stream": Array [
     1,
-    4,
+    3,
     "_et_f9aab_test_2",
     null,
     Array [],
@@ -9,7 +9,7 @@ Object {
     3,
     -3,
     0,
-    4,
+    3,
     -1,
   ],
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.mixed-operations/output.txt b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.mixed-operations/output.txt
index 1b19623ee0..80cb62b7b8 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.mixed-operations/output.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.mixed-operations/output.txt
@@ -8,7 +8,7 @@ Object {
       -1,
     ],
     1,
-    5,
+    4,
     "_et_04991_test_3",
     null,
     Array [],
@@ -16,7 +16,7 @@ Object {
     3,
     -3,
     0,
-    5,
+    4,
     0,
   ],
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.non-string-raw-text-key-on-main/output.txt b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.non-string-raw-text-key-on-main/output.txt
index 486a16f3dc..a6195536aa 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.non-string-raw-text-key-on-main/output.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/children.non-string-raw-text-key-on-main/output.txt
@@ -1,7 +1,7 @@
 Object {
   "stream": Array [
     1,
-    4,
+    3,
     "_et_builtin_raw_text",
     null,
     Array [
@@ -11,7 +11,7 @@ Object {
     3,
     -2,
     0,
-    4,
+    3,
     0,
   ],
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/complex-trees.deeply-nested-dynamic-content/output.txt b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/complex-trees.deeply-nested-dynamic-content/output.txt
index e415ce8bb9..1b1a01ce5b 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/complex-trees.deeply-nested-dynamic-content/output.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate-compiled/complex-trees.deeply-nested-dynamic-content/output.txt
@@ -5,7 +5,7 @@ Object {
     0,
     "BG",
     1,
-    10,
+    7,
     "_et_c2579_test_5",
     null,
     Array [],
@@ -13,7 +13,7 @@ Object {
     3,
     -4,
     0,
-    10,
+    7,
     0,
   ],
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/patch-compiled/applies-insert-before-with-reference/ops.txt b/packages/react/runtime/__test__/element-template/fixtures/patch-compiled/applies-insert-before-with-reference/ops.txt
index 8718a6e77a..a9781ab792 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/patch-compiled/applies-insert-before-with-reference/ops.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/patch-compiled/applies-insert-before-with-reference/ops.txt
@@ -1,6 +1,6 @@
 Array [
   1,
-  4,
+  3,
   "_et_3634f_test_1",
   null,
   Array [],
@@ -8,6 +8,6 @@ Array [
   3,
   -3,
   0,
-  4,
+  3,
   -1,
 ]
diff --git a/packages/react/runtime/__test__/element-template/fixtures/patch-compiled/apply-hydration-ops/ops.txt b/packages/react/runtime/__test__/element-template/fixtures/patch-compiled/apply-hydration-ops/ops.txt
index e588f6e2c3..9b922eb725 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/patch-compiled/apply-hydration-ops/ops.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/patch-compiled/apply-hydration-ops/ops.txt
@@ -18,7 +18,7 @@ Array [
   -1,
   0,
   1,
-  9,
+  7,
   "_et_b81b7_test_4",
   null,
   Array [],
@@ -26,6 +26,6 @@ Array [
   3,
   -5,
   0,
-  9,
+  7,
   0,
 ]
diff --git a/packages/react/runtime/__test__/element-template/fixtures/render/child-siblings/index.js.txt b/packages/react/runtime/__test__/element-template/fixtures/render/child-siblings/index.js.txt
index a81a482dcd..fccbbbeae3 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/render/child-siblings/index.js.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/render/child-siblings/index.js.txt
@@ -4,23 +4,19 @@ const _et_7a8c6_test_3 = "_et_7a8c6_test_3";
 const _et_7a8c6_test_1 = "_et_7a8c6_test_1";
 export function App() {
     return /*#__PURE__*/ _jsx(_et_7a8c6_test_1, {
-        children: [
-            [
-                /*#__PURE__*/ _jsx(Sub, {
-                    children: /*#__PURE__*/ _jsx(_et_7a8c6_test_2, {})
-                }),
-                /*#__PURE__*/ _jsx(Sub, {
-                    children: /*#__PURE__*/ _jsx(_et_7a8c6_test_3, {})
-                })
-            ]
+        $0: [
+            /*#__PURE__*/ _jsx(Sub, {
+                children: /*#__PURE__*/ _jsx(_et_7a8c6_test_2, {})
+            }),
+            /*#__PURE__*/ _jsx(Sub, {
+                children: /*#__PURE__*/ _jsx(_et_7a8c6_test_3, {})
+            })
         ]
     });
 }
 const _et_7a8c6_test_4 = "_et_7a8c6_test_4";
 function Sub(props) {
     return /*#__PURE__*/ _jsx(_et_7a8c6_test_4, {
-        children: [
-            props.children
-        ]
+        $0: props.children
     });
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/render/component-slot-content/index.js.txt b/packages/react/runtime/__test__/element-template/fixtures/render/component-slot-content/index.js.txt
index edcc9215de..21d53e9c9e 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/render/component-slot-content/index.js.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/render/component-slot-content/index.js.txt
@@ -2,19 +2,15 @@ import { jsx as _jsx } from "@lynx-js/react/jsx-runtime";
 const _et_7a8c6_test_1 = "_et_7a8c6_test_1";
 function CustomComponent(props) {
     return /*#__PURE__*/ _jsx(_et_7a8c6_test_1, {
-        children: [
-            props.children
-        ]
+        $0: props.children
     });
 }
 const _et_7a8c6_test_3 = "_et_7a8c6_test_3";
 const _et_7a8c6_test_2 = "_et_7a8c6_test_2";
 export function App() {
     return /*#__PURE__*/ _jsx(_et_7a8c6_test_2, {
-        children: [
-            /*#__PURE__*/ _jsx(CustomComponent, {
-                children: /*#__PURE__*/ _jsx(_et_7a8c6_test_3, {})
-            })
-        ]
+        $0: /*#__PURE__*/ _jsx(CustomComponent, {
+            children: /*#__PURE__*/ _jsx(_et_7a8c6_test_3, {})
+        })
     });
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/render/component/index.js.txt b/packages/react/runtime/__test__/element-template/fixtures/render/component/index.js.txt
index 3d0506cef0..328a16c36c 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/render/component/index.js.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/render/component/index.js.txt
@@ -5,10 +5,8 @@ export function App() {
     const y = 2;
     const z = 3;
     return /*#__PURE__*/ _jsx(_et_7a8c6_test_1, {
-        children: [
-            x,
-            y,
-            z
-        ]
+        $0: x,
+        $1: y,
+        $2: z
     });
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/render/mapped-view-children/index.js.txt b/packages/react/runtime/__test__/element-template/fixtures/render/mapped-view-children/index.js.txt
index d01b5c8836..5146e2c260 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/render/mapped-view-children/index.js.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/render/mapped-view-children/index.js.txt
@@ -8,15 +8,11 @@ export function App() {
         'C'
     ];
     return /*#__PURE__*/ _jsx(_et_7a8c6_test_1, {
-        children: [
-            items.map((item)=>/*#__PURE__*/ _jsx(_et_7a8c6_test_2, {
-                    attributeSlots: [
-                        item
-                    ],
-                    children: [
-                        item
-                    ]
-                }))
-        ]
+        $0: items.map((item)=>/*#__PURE__*/ _jsx(_et_7a8c6_test_2, {
+                attributeSlots: [
+                    item
+                ],
+                $0: item
+            }))
     });
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/render/mixed-children/index.js.txt b/packages/react/runtime/__test__/element-template/fixtures/render/mixed-children/index.js.txt
index b3b55d859c..b55cb20e1f 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/render/mixed-children/index.js.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/render/mixed-children/index.js.txt
@@ -7,11 +7,9 @@ export class App extends Component {
         const innerText = 'B';
         const trailing = 'C';
         return /*#__PURE__*/ _jsx(_et_7a8c6_test_1, {
-            children: [
-                leading,
-                innerText,
-                trailing
-            ]
+            $0: leading,
+            $1: innerText,
+            $2: trailing
         });
     }
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/render/multiple-text/index.js.txt b/packages/react/runtime/__test__/element-template/fixtures/render/multiple-text/index.js.txt
index 32c6844f17..01df92fbb1 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/render/multiple-text/index.js.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/render/multiple-text/index.js.txt
@@ -11,20 +11,14 @@ export class App extends Component {
             'C'
         ];
         return /*#__PURE__*/ _jsx(_et_7a8c6_test_1, {
-            children: [
-                items,
-                items.map((item)=>/*#__PURE__*/ _jsx(_et_7a8c6_test_2, {
-                        children: [
-                            item
-                        ]
-                    })),
-                items,
-                items.map((item)=>/*#__PURE__*/ _jsx(_et_7a8c6_test_3, {
-                        children: [
-                            item
-                        ]
-                    }))
-            ]
+            $0: items,
+            $1: items.map((item)=>/*#__PURE__*/ _jsx(_et_7a8c6_test_2, {
+                    $0: item
+                })),
+            $2: items,
+            $3: items.map((item)=>/*#__PURE__*/ _jsx(_et_7a8c6_test_3, {
+                    $0: item
+                }))
         });
     }
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/render/nested-templates/index.js.txt b/packages/react/runtime/__test__/element-template/fixtures/render/nested-templates/index.js.txt
index 3d8dfc673a..4fa51229d3 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/render/nested-templates/index.js.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/render/nested-templates/index.js.txt
@@ -4,9 +4,7 @@ const _et_7a8c6_test_1 = "_et_7a8c6_test_1";
 class Inner extends Component {
     render() {
         return /*#__PURE__*/ _jsx(_et_7a8c6_test_1, {
-            children: [
-                this.props.message
-            ]
+            $0: this.props.message
         });
     }
 }
@@ -14,11 +12,9 @@ const _et_7a8c6_test_2 = "_et_7a8c6_test_2";
 export class App extends Component {
     render() {
         return /*#__PURE__*/ _jsx(_et_7a8c6_test_2, {
-            children: [
-                /*#__PURE__*/ _jsx(Inner, {
-                    message: "X"
-                })
-            ]
+            $0: /*#__PURE__*/ _jsx(Inner, {
+                message: "X"
+            })
         });
     }
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/render/react-example/index.js.txt b/packages/react/runtime/__test__/element-template/fixtures/render/react-example/index.js.txt
index 953cd283ec..6ab1587ea2 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/render/react-example/index.js.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/render/react-example/index.js.txt
@@ -25,17 +25,15 @@ export function App() {
             1,
             arrow
         ],
-        children: [
-            alterLogo ? /*#__PURE__*/ _jsx(_et_7a8c6_test_2, {
-                attributeSlots: [
-                    reactLynxLogo
-                ]
-            }) : /*#__PURE__*/ _jsx(_et_7a8c6_test_3, {
-                attributeSlots: [
-                    lynxLogo
-                ]
-            }),
-            ' src/App.tsx '
-        ]
+        $0: alterLogo ? /*#__PURE__*/ _jsx(_et_7a8c6_test_2, {
+            attributeSlots: [
+                reactLynxLogo
+            ]
+        }) : /*#__PURE__*/ _jsx(_et_7a8c6_test_3, {
+            attributeSlots: [
+                lynxLogo
+            ]
+        }),
+        $1: ' src/App.tsx '
     });
 }

From 24dec8f47633a1284bdd2b8eff23cc910e252df1 Mon Sep 17 00:00:00 2001
From: Yiming Li <yimingli.cs@gmail.com>
Date: Sat, 16 May 2026 17:32:50 +0800
Subject: [PATCH 03/12] test(react): fix mockNativePapi schema + drop ET
 internal import assertion

- mockNativePapi/templateTree.test.ts used a `kind: 'attribute' | 'spread', binding: ...` schema that doesn't match what the SWC transform emits (`kind: 'static' | 'slot' | 'spread'`), so the spread-vs-slot ordering case asserted the wrong descriptor was being treated as `spread`. Align with the production schema.
- webpack/react-webpack-plugin's background-loader test required an `@lynx-js/react/element-template[/internal]` import to confirm ET was active, which only existed because the old lowering emitted an `__etSlot(N, ...)` runtime call. With multi-slot lowering the import is no longer needed; assert on the `_et_<hash>_` template-id prefix instead.
---
 .../test-utils/mock/mockNativePapi/templateTree.test.ts    | 2 ++
 .../react-webpack-plugin/test/background-loader.test.ts    | 7 ++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/react/runtime/__test__/element-template/test-utils/mock/mockNativePapi/templateTree.test.ts b/packages/react/runtime/__test__/element-template/test-utils/mock/mockNativePapi/templateTree.test.ts
index 9dbfa1f7ba..ad70fb8bbd 100644
--- a/packages/react/runtime/__test__/element-template/test-utils/mock/mockNativePapi/templateTree.test.ts
+++ b/packages/react/runtime/__test__/element-template/test-utils/mock/mockNativePapi/templateTree.test.ts
@@ -10,6 +10,8 @@ describe('mock native template tree spread slots', () => {
     const template = {
       kind: 'element',
       type: 'view',
+      // Descriptor kinds match what the SWC transform emits in
+      // `compiled_template.attributesArray`: `static`, `slot`, `spread`.
       attributesArray: [
         { kind: 'static', key: 'id', value: 'static-id' },
         { kind: 'spread', attrSlotIndex: 0 },
diff --git a/packages/webpack/react-webpack-plugin/test/background-loader.test.ts b/packages/webpack/react-webpack-plugin/test/background-loader.test.ts
index e75e1f0e8c..3ea63c997e 100644
--- a/packages/webpack/react-webpack-plugin/test/background-loader.test.ts
+++ b/packages/webpack/react-webpack-plugin/test/background-loader.test.ts
@@ -75,9 +75,10 @@ describe('background loader', () => {
     expect(result.code).not.toContain(
       '"@lynx-js/react/element-template/jsx-runtime"',
     );
-    expect(result.code).toMatch(
-      /"@lynx-js\/react\/element-template(?:\/internal)?"/,
-    );
     expect(result.code).not.toContain('"@lynx-js/react/internal"');
+    // Multi-slot lowering no longer needs an `__etSlot` runtime call, so the
+    // ET path is now identified by the `_et_` template id prefix rather than
+    // by an `@lynx-js/react/element-template[/internal]` import.
+    expect(result.code).toMatch(/_et_[a-z0-9]+_/);
   });
 });

From c8e4d49b638d592f000fc5f487816f4406fe1251 Mon Sep 17 00:00:00 2001
From: Yiming Li <yimingli.cs@gmail.com>
Date: Sat, 16 May 2026 17:56:24 +0800
Subject: [PATCH 04/12] test(react): cover legacy paths + drop unreachable
 post-multi-slot branches
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BackgroundElementTemplateInstance.insertBefore/removeChild no longer fall
  through to a trailing `if (silent) return` after the multi-slot branch
  short-circuits — the implicit return at end-of-function is equivalent.
- Mark the `slotId < 0` guard in syncMultiSlotChildren and the non-numeric
  `$N` slot id branch in render-to-opcodes.ts with `v8 ignore` since the
  transform never emits them.
- Add adapter tests for `createElementNS('slot')` and a legacy-slot
  `insertBefore` test with a non-null anchor so the slot wrapper code paths
  stay covered at 100%.
---
 .../adapter/background-adapter.et.test.tsx    | 14 +++++++++++
 .../runtime/background/instance.test.ts       | 24 +++++++++++++++++++
 .../element-template/background/instance.ts   | 11 +--------
 .../runtime/render/render-to-opcodes.ts       |  1 +
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/packages/react/runtime/__test__/element-template/runtime/background/adapter/background-adapter.et.test.tsx b/packages/react/runtime/__test__/element-template/runtime/background/adapter/background-adapter.et.test.tsx
index 10599bc753..8bdc17642a 100644
--- a/packages/react/runtime/__test__/element-template/runtime/background/adapter/background-adapter.et.test.tsx
+++ b/packages/react/runtime/__test__/element-template/runtime/background/adapter/background-adapter.et.test.tsx
@@ -30,6 +30,20 @@ describe('Background Element Template Adapter', () => {
     expect(el.type).toBe('slot');
   });
 
+  it('creates BackgroundElementTemplateSlot via createElementNS for "slot" type', () => {
+    // Preact's diffElementNodes always goes through createElementNS — keep the
+    // legacy slot wrapper available so pre-multi-slot bundles still work.
+    const el = doc.createElementNS('http://www.w3.org/1999/xhtml', 'slot');
+    expect(el).toBeInstanceOf(BackgroundElementTemplateInstance);
+    expect(el.type).toBe('slot');
+  });
+
+  it('creates BackgroundElementTemplateInstance via createElementNS for non-slot type', () => {
+    const el = doc.createElementNS('http://www.w3.org/1999/xhtml', 'view');
+    expect(el).toBeInstanceOf(BackgroundElementTemplateInstance);
+    expect(el.type).toBe('view');
+  });
+
   it('creates builtin raw-text template instances for text nodes', () => {
     const node = doc.createTextNode('hello');
     expect(node).toBeInstanceOf(BackgroundElementTemplateInstance);
diff --git a/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts b/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
index e9b267e124..77e645fb43 100644
--- a/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
+++ b/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
@@ -207,6 +207,30 @@ describe('BackgroundElementTemplateInstance', () => {
       ]);
     });
 
+    it('honors a non-null beforeChild anchor on legacy slot inserts', () => {
+      const parent = new BackgroundElementTemplateInstance('view');
+      const slot = new BackgroundElementTemplateSlot();
+      slot.setAttribute('id', 0);
+      parent.appendChild(slot);
+      const anchor = new BackgroundElementTemplateInstance('text');
+      slot.appendChild(anchor);
+      parent.emitCreate();
+
+      markElementTemplateHydrated();
+      globalCommitContext.ops = [];
+
+      const incoming = new BackgroundElementTemplateInstance('image');
+      slot.insertBefore(incoming, anchor);
+
+      expect(globalCommitContext.ops.slice(-5)).toEqual([
+        3,
+        parent.instanceId,
+        0,
+        incoming.instanceId,
+        anchor.instanceId,
+      ]);
+    });
+
     it('defers nested slot inserts until the owner template is created', () => {
       const parent = new BackgroundElementTemplateInstance('view');
       const slot = new BackgroundElementTemplateSlot();
diff --git a/packages/react/runtime/src/element-template/background/instance.ts b/packages/react/runtime/src/element-template/background/instance.ts
index bcb3c8b426..98d7462610 100644
--- a/packages/react/runtime/src/element-template/background/instance.ts
+++ b/packages/react/runtime/src/element-template/background/instance.ts
@@ -62,6 +62,7 @@ function syncMultiSlotChildren(
   parent: BackgroundElementTemplateInstance,
   slotId: number,
 ): void {
+  /* v8 ignore next 3 -- defensive: Preact always sets a non-negative slotIndex. */
   if (slotId < 0) {
     return;
   }
@@ -252,11 +253,6 @@ export class BackgroundElementTemplateInstance {
         child.instanceId,
         beforeId,
       );
-      return;
-    }
-
-    if (silent) {
-      return;
     }
   }
 
@@ -339,11 +335,6 @@ export class BackgroundElementTemplateInstance {
         collectElementTemplateSubtreeHandleIds(child),
       );
       markRemovedSubtreeForCurrentCommit(child);
-      return;
-    }
-
-    if (silent) {
-      return;
     }
   }
 
diff --git a/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts b/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts
index a231728ff0..12136385c5 100644
--- a/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts
+++ b/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts
@@ -262,6 +262,7 @@ function renderCompiledEtHostVNode(vnode, props, context, opcodes) {
       continue;
     }
     const slotId = +name.slice(1);
+    /* v8 ignore next 3 -- defensive: transform only emits `$<int>`, so non-numeric slot ids should never reach here. */
     if (!(slotId >= 0)) {
       continue;
     }

From 95636592efd3762f9c338739922d141e97cd0103 Mon Sep 17 00:00:00 2001
From: Yiming Li <yimingli.cs@gmail.com>
Date: Mon, 18 May 2026 11:16:27 +0800
Subject: [PATCH 05/12] refactor(react): drop BackgroundElementTemplateSlot
 legacy path
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The slot wrapper class only existed to back the old `__etSlot(N, ...)`
runtime call emitted by the pre-multi-slot lowering. The new lowering does
not emit it, no consumer creates `<slot>` JSX, and `experimental_useElementTemplate`
has no published bundles relying on the old path — so remove the class
outright.

- `BackgroundElementTemplateInstance.insertBefore`/`removeChild` collapse
  to the single multi-slot path keyed off `child.__slotIndex`.
- `document.ts` no longer special-cases `type === 'slot'`.
- `__etSlot()` runtime component and its `internal.ts` re-export are deleted.
- Tests/fixtures that built trees via slot wrappers were rewritten to
  attach children directly with `__slotIndex`; obsolete describe blocks
  asserting slot-wrapper internals were dropped.
- Four hydrate fixture `output.txt`s were regenerated because removed
  slot wrappers no longer consume instance ids.
---
 .../fixtures/background/instance/_shared.ts   |   6 +-
 .../ops/supports-silent-insert-before/case.ts |  12 +-
 .../hydrate/background-hydrate/_shared.tsx    |  63 ++---
 .../output.txt                                |   8 +-
 .../output.txt                                |   4 +-
 .../coverage.move-before-child/output.txt     |   4 +-
 .../coverage.raw-text-key-branches/output.txt |   2 +-
 .../adapter/background-adapter.et.test.tsx    |  39 ---
 .../runtime/background/commit-context.test.ts |  11 +-
 .../runtime/background/hydrate.test.ts        | 168 +++++--------
 .../runtime/background/instance.test.ts       | 223 ++----------------
 .../runtime/components/slot.test.ts           |  20 --
 .../hydration/hydration-listener.test.ts      |  11 +-
 .../element-template/background/document.ts   |  14 +-
 .../element-template/background/instance.ts   | 188 +++------------
 .../runtime/src/element-template/internal.ts  |   1 -
 .../runtime/components/slot.ts                |  17 --
 17 files changed, 161 insertions(+), 630 deletions(-)
 delete mode 100644 packages/react/runtime/__test__/element-template/runtime/components/slot.test.ts
 delete mode 100644 packages/react/runtime/src/element-template/runtime/components/slot.ts

diff --git a/packages/react/runtime/__test__/element-template/fixtures/background/instance/_shared.ts b/packages/react/runtime/__test__/element-template/fixtures/background/instance/_shared.ts
index e259a8fe67..9631d3f9df 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/background/instance/_shared.ts
+++ b/packages/react/runtime/__test__/element-template/fixtures/background/instance/_shared.ts
@@ -6,10 +6,7 @@ import {
   markElementTemplateHydrated,
   resetElementTemplateCommitState,
 } from '../../../../../src/element-template/background/commit-hook.js';
-import {
-  BackgroundElementTemplateInstance,
-  BackgroundElementTemplateSlot,
-} from '../../../../../src/element-template/background/instance.js';
+import { BackgroundElementTemplateInstance } from '../../../../../src/element-template/background/instance.js';
 import { backgroundElementTemplateInstanceManager } from '../../../../../src/element-template/background/manager.js';
 
 export function runCase<T>(runner: () => T): T {
@@ -27,7 +24,6 @@ export function runCase<T>(runner: () => T): T {
 
 export {
   BackgroundElementTemplateInstance,
-  BackgroundElementTemplateSlot,
   globalCommitContext,
   markElementTemplateHydrated,
   resetGlobalCommitContext,
diff --git a/packages/react/runtime/__test__/element-template/fixtures/background/instance/ops/supports-silent-insert-before/case.ts b/packages/react/runtime/__test__/element-template/fixtures/background/instance/ops/supports-silent-insert-before/case.ts
index 6fe379c6f3..0bdd00d9c1 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/background/instance/ops/supports-silent-insert-before/case.ts
+++ b/packages/react/runtime/__test__/element-template/fixtures/background/instance/ops/supports-silent-insert-before/case.ts
@@ -1,19 +1,11 @@
-import {
-  BackgroundElementTemplateInstance,
-  BackgroundElementTemplateSlot,
-  globalCommitContext,
-  runCase,
-} from '../../_shared.js';
+import { BackgroundElementTemplateInstance, globalCommitContext, runCase } from '../../_shared.js';
 
 export function run() {
   return runCase(() => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    root.appendChild(slot);
 
     const child = new BackgroundElementTemplateInstance('view');
-    slot.insertBefore(child, null, true);
+    root.insertBefore(child, null, true);
 
     return globalCommitContext.ops;
   });
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx
index dfc41db8d8..2c44cced60 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx
@@ -15,7 +15,6 @@ import {
 import '../../../../../src/element-template/native/index.js';
 import {
   BackgroundElementTemplateInstance,
-  BackgroundElementTemplateSlot,
   BUILTIN_RAW_TEXT_TEMPLATE_KEY,
 } from '../../../../../src/element-template/background/instance.js';
 import { backgroundElementTemplateInstanceManager } from '../../../../../src/element-template/background/manager.js';
@@ -378,11 +377,8 @@ export function runCaseByName(name: string): unknown {
     backgroundElementTemplateInstanceManager.nextId = 0;
 
     const rootInstance = new BackgroundElementTemplateInstance('root');
-    const slot0 = new BackgroundElementTemplateSlot();
-    slot0.setAttribute('id', 0);
     const child = new BackgroundElementTemplateInstance('child');
-    slot0.appendChild(child);
-    rootInstance.appendChild(slot0);
+    rootInstance.appendChild(child);
 
     const before = createHydrationTemplate(-1, 'root');
     const stream = hydrateBackground(before, rootInstance);
@@ -410,21 +406,15 @@ export function runCaseByName(name: string): unknown {
     backgroundElementTemplateInstanceManager.nextId = 0;
 
     const rootInstance = new BackgroundElementTemplateInstance('root');
-    const slot0 = new BackgroundElementTemplateSlot();
-    slot0.setAttribute('id', 0);
-    rootInstance.appendChild(slot0);
 
     const existing = new BackgroundElementTemplateInstance('existing');
-    slot0.appendChild(existing);
+    rootInstance.appendChild(existing);
 
     const card = new BackgroundElementTemplateInstance('card');
     card.setAttribute('attributeSlots', [{ id: 'card' }]);
-    const cardSlot = new BackgroundElementTemplateSlot();
-    cardSlot.setAttribute('id', 0);
     const text = createTextNode('NEW');
-    cardSlot.appendChild(text);
-    card.appendChild(cardSlot);
-    slot0.insertBefore(card, existing);
+    card.appendChild(text);
+    rootInstance.insertBefore(card, existing);
 
     const beforeExisting = createHydrationChild(-2, 'existing');
     const beforeRemoved = createHydrationChild(-3, 'removed');
@@ -443,11 +433,8 @@ export function runCaseByName(name: string): unknown {
     backgroundElementTemplateInstanceManager.nextId = 0;
 
     const rootInstance = new BackgroundElementTemplateInstance('root');
-    const slot0 = new BackgroundElementTemplateSlot();
-    slot0.setAttribute('id', 0);
-    rootInstance.appendChild(slot0);
     const rawText = createTextNode('');
-    slot0.appendChild(rawText);
+    rootInstance.appendChild(rawText);
 
     const before = createHydrationTemplate(-1, 'root', {
       elementSlots: [[createHydrationRawTextChild(3, '')]],
@@ -467,14 +454,11 @@ export function runCaseByName(name: string): unknown {
     backgroundElementTemplateInstanceManager.nextId = 0;
 
     const rootInstance = new BackgroundElementTemplateInstance('root');
-    const slot0 = new BackgroundElementTemplateSlot();
-    slot0.setAttribute('id', 0);
-    rootInstance.appendChild(slot0);
 
     const rawTextText = createTextNode('bg');
     const rawTextInstance = new BackgroundElementTemplateInstance(BUILTIN_RAW_TEXT_TEMPLATE_KEY);
-    slot0.appendChild(rawTextText);
-    slot0.appendChild(rawTextInstance);
+    rootInstance.appendChild(rawTextText);
+    rootInstance.appendChild(rawTextInstance);
 
     const beforeExistingString = createHydrationRawTextChild(rawTextText.instanceId, 'bg');
     const beforeExistingNonString = createHydrationRawTextChild(rawTextInstance.instanceId, 123);
@@ -501,12 +485,16 @@ export function runCaseByName(name: string): unknown {
     backgroundElementTemplateInstanceManager.nextId = 0;
 
     const rootInstance = new BackgroundElementTemplateInstance('root');
-    const slot0 = new BackgroundElementTemplateSlot();
-    slot0.setAttribute('id', 0);
-    rootInstance.appendChild(slot0);
-    const slot1 = new BackgroundElementTemplateSlot();
-    slot1.setAttribute('id', 1);
-    rootInstance.appendChild(slot1);
+    // Materialize slot indexes 0 and 1 in the multi-slot map by attaching and
+    // then silently removing placeholder children at each index.
+    const placeholder0 = new BackgroundElementTemplateInstance('placeholder');
+    placeholder0.__slotIndex = 0;
+    rootInstance.appendChild(placeholder0);
+    rootInstance.removeChild(placeholder0, true);
+    const placeholder1 = new BackgroundElementTemplateInstance('placeholder');
+    placeholder1.__slotIndex = 1;
+    rootInstance.appendChild(placeholder1);
+    rootInstance.removeChild(placeholder1, true);
 
     const before = createHydrationTemplate(-1, 'root', { elementSlots: [[], []] });
     const stream = hydrateBackground(before, rootInstance);
@@ -520,9 +508,11 @@ export function runCaseByName(name: string): unknown {
     backgroundElementTemplateInstanceManager.nextId = 0;
 
     const rootInstance = new BackgroundElementTemplateInstance('root');
-    const slot0 = new BackgroundElementTemplateSlot();
-    slot0.setAttribute('id', 0);
-    rootInstance.appendChild(slot0);
+    // Materialize slot index 0 in the multi-slot map via a transient placeholder.
+    const placeholder = new BackgroundElementTemplateInstance('placeholder');
+    placeholder.__slotIndex = 0;
+    rootInstance.appendChild(placeholder);
+    rootInstance.removeChild(placeholder, true);
 
     const before = createHydrationTemplate(-1, 'root', { elementSlots: [[]] });
     const stream = hydrateBackground(before, rootInstance);
@@ -536,16 +526,13 @@ export function runCaseByName(name: string): unknown {
     backgroundElementTemplateInstanceManager.nextId = 0;
 
     const rootInstance = new BackgroundElementTemplateInstance('root');
-    const slot0 = new BackgroundElementTemplateSlot();
-    slot0.setAttribute('id', 0);
-    rootInstance.appendChild(slot0);
 
     const childA = new BackgroundElementTemplateInstance('a');
     const childB = new BackgroundElementTemplateInstance('b');
     const childC = new BackgroundElementTemplateInstance('c');
-    slot0.appendChild(childB);
-    slot0.appendChild(childA);
-    slot0.appendChild(childC);
+    rootInstance.appendChild(childB);
+    rootInstance.appendChild(childA);
+    rootInstance.appendChild(childC);
 
     const beforeChildA = createHydrationChild(childA.instanceId, 'a');
     const beforeChildB = createHydrationChild(childB.instanceId, 'b');
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.creates-missing-nodes-recursively/output.txt b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.creates-missing-nodes-recursively/output.txt
index d9b87195d7..ceaa1a335b 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.creates-missing-nodes-recursively/output.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.creates-missing-nodes-recursively/output.txt
@@ -1,7 +1,7 @@
 Object {
   "stream": Array [
     1,
-    6,
+    4,
     "_et_builtin_raw_text",
     null,
     Array [
@@ -9,7 +9,7 @@ Object {
     ],
     Array [],
     1,
-    4,
+    3,
     "card",
     null,
     Array [
@@ -19,13 +19,13 @@ Object {
     ],
     Array [
       Array [
-        6,
+        4,
       ],
     ],
     3,
     -1,
     0,
-    4,
+    3,
     -2,
     4,
     -1,
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.missing-slot-record-on-main/output.txt b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.missing-slot-record-on-main/output.txt
index a9c3d9ce1d..3f41b9b863 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.missing-slot-record-on-main/output.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.missing-slot-record-on-main/output.txt
@@ -1,7 +1,7 @@
 Object {
   "stream": Array [
     1,
-    3,
+    2,
     "child",
     null,
     Array [],
@@ -9,7 +9,7 @@ Object {
     3,
     -1,
     0,
-    3,
+    2,
     0,
   ],
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/coverage.move-before-child/output.txt b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/coverage.move-before-child/output.txt
index 40a9c796bf..11501ad613 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/coverage.move-before-child/output.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/coverage.move-before-child/output.txt
@@ -3,7 +3,7 @@ Object {
     3,
     1,
     0,
-    3,
-    5,
+    2,
+    4,
   ],
 }
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/coverage.raw-text-key-branches/output.txt b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/coverage.raw-text-key-branches/output.txt
index 6745642c57..5a74fc1d64 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/coverage.raw-text-key-branches/output.txt
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/coverage.raw-text-key-branches/output.txt
@@ -1,7 +1,7 @@
 Object {
   "stream": Array [
     2,
-    4,
+    3,
     0,
     null,
     4,
diff --git a/packages/react/runtime/__test__/element-template/runtime/background/adapter/background-adapter.et.test.tsx b/packages/react/runtime/__test__/element-template/runtime/background/adapter/background-adapter.et.test.tsx
index 8bdc17642a..d8da3646f9 100644
--- a/packages/react/runtime/__test__/element-template/runtime/background/adapter/background-adapter.et.test.tsx
+++ b/packages/react/runtime/__test__/element-template/runtime/background/adapter/background-adapter.et.test.tsx
@@ -6,7 +6,6 @@ import {
   BackgroundElementTemplateInstance,
   BUILTIN_RAW_TEXT_TEMPLATE_KEY,
 } from '../../../../../src/element-template/background/instance.js';
-import { __etSlot } from '../../../../../src/element-template/runtime/components/slot.js';
 
 describe('Background Element Template Adapter', () => {
   let doc: BackgroundElementTemplateDocument;
@@ -24,20 +23,6 @@ describe('Background Element Template Adapter', () => {
     expect(el.nodeType).toBe(1);
   });
 
-  it('creates BackgroundElementTemplateSlot for "slot" type', () => {
-    const el = doc.createElement('slot');
-    expect(el).toBeInstanceOf(BackgroundElementTemplateInstance);
-    expect(el.type).toBe('slot');
-  });
-
-  it('creates BackgroundElementTemplateSlot via createElementNS for "slot" type', () => {
-    // Preact's diffElementNodes always goes through createElementNS — keep the
-    // legacy slot wrapper available so pre-multi-slot bundles still work.
-    const el = doc.createElementNS('http://www.w3.org/1999/xhtml', 'slot');
-    expect(el).toBeInstanceOf(BackgroundElementTemplateInstance);
-    expect(el.type).toBe('slot');
-  });
-
   it('creates BackgroundElementTemplateInstance via createElementNS for non-slot type', () => {
     const el = doc.createElementNS('http://www.w3.org/1999/xhtml', 'view');
     expect(el).toBeInstanceOf(BackgroundElementTemplateInstance);
@@ -83,28 +68,4 @@ describe('Background Element Template Adapter', () => {
       expect(child2.parent).toBeNull();
     });
   });
-
-  describe('__etSlot', () => {
-    it('returns <slot> element in background', () => {
-      vi.stubGlobal('__BACKGROUND__', true);
-      const vnode = __etSlot(10, 'content') as unknown as {
-        type: string;
-        props: { id: number; children: unknown };
-      };
-      expect(vnode).not.toBe('content');
-      expect(vnode.type).toBe('slot');
-      expect(vnode.props.id).toBe(10);
-      expect(vnode.props.children).toBe('content');
-
-      vi.unstubAllGlobals();
-    });
-
-    it('throws in main thread (default)', () => {
-      vi.stubGlobal('__BACKGROUND__', false);
-      expect(() => __etSlot(10, 'content')).toThrow(
-        '__etSlot() should not run on the main thread. LEPUS ET children are lowered to slot arrays at compile time.',
-      );
-      vi.unstubAllGlobals();
-    });
-  });
 });
diff --git a/packages/react/runtime/__test__/element-template/runtime/background/commit-context.test.ts b/packages/react/runtime/__test__/element-template/runtime/background/commit-context.test.ts
index 8ec75336ec..dd7afd3e4e 100644
--- a/packages/react/runtime/__test__/element-template/runtime/background/commit-context.test.ts
+++ b/packages/react/runtime/__test__/element-template/runtime/background/commit-context.test.ts
@@ -12,7 +12,6 @@ import {
 } from '../../../../src/element-template/background/commit-context.js';
 import {
   BackgroundElementTemplateInstance,
-  BackgroundElementTemplateSlot,
   BUILTIN_RAW_TEXT_TEMPLATE_KEY,
   collectElementTemplateSubtreeHandleIds,
 } from '../../../../src/element-template/background/instance.js';
@@ -58,16 +57,10 @@ describe('ElementTemplate commit context', () => {
 
   it('collects only handles that are registered in the main-thread registry', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    root.appendChild(slot);
     const child = new BackgroundElementTemplateInstance('child');
-    const childSlot = new BackgroundElementTemplateSlot();
-    childSlot.setAttribute('id', 0);
-    child.appendChild(childSlot);
     const rawText = new BackgroundElementTemplateInstance(BUILTIN_RAW_TEXT_TEMPLATE_KEY, ['text']);
-    childSlot.appendChild(rawText);
-    slot.appendChild(child);
+    child.appendChild(rawText);
+    root.appendChild(child);
 
     expect(collectElementTemplateSubtreeHandleIds(root)).toEqual([
       root.instanceId,
diff --git a/packages/react/runtime/__test__/element-template/runtime/background/hydrate.test.ts b/packages/react/runtime/__test__/element-template/runtime/background/hydrate.test.ts
index 64b5c40e74..7bd810af4b 100644
--- a/packages/react/runtime/__test__/element-template/runtime/background/hydrate.test.ts
+++ b/packages/react/runtime/__test__/element-template/runtime/background/hydrate.test.ts
@@ -8,7 +8,6 @@ import {
 import { hydrate } from '../../../../src/element-template/background/hydrate.js';
 import {
   BackgroundElementTemplateInstance,
-  BackgroundElementTemplateSlot,
   BUILTIN_RAW_TEXT_TEMPLATE_KEY,
 } from '../../../../src/element-template/background/instance.js';
 import { backgroundElementTemplateInstanceManager } from '../../../../src/element-template/background/manager.js';
@@ -69,11 +68,8 @@ describe('hydrate', () => {
 
   it('returns an empty stream when background slot children already match', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    root.appendChild(slot);
     const child = new BackgroundElementTemplateInstance('child');
-    slot.appendChild(child);
+    root.appendChild(child);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root', {
@@ -88,20 +84,14 @@ describe('hydrate', () => {
 
   it('patches attribute slots while creating and inserting background-only children', () => {
     const root = new BackgroundElementTemplateInstance('root', ['background-root']);
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    root.appendChild(slot);
 
     const existing = new BackgroundElementTemplateInstance('item', ['background-existing']);
-    slot.appendChild(existing);
+    root.appendChild(existing);
 
     const card = new BackgroundElementTemplateInstance('card', ['background-card']);
-    const cardSlot = new BackgroundElementTemplateSlot();
-    cardSlot.setAttribute('id', 0);
-    card.appendChild(cardSlot);
     const rawText = new BackgroundElementTemplateInstance(BUILTIN_RAW_TEXT_TEMPLATE_KEY, ['NEW']);
-    cardSlot.appendChild(rawText);
-    slot.appendChild(card);
+    card.appendChild(rawText);
+    root.appendChild(card);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root', {
@@ -148,9 +138,6 @@ describe('hydrate', () => {
 
   it('removes serialized children that are missing from the background slot', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    root.appendChild(slot);
 
     const stale = new BackgroundElementTemplateInstance('stale');
 
@@ -168,14 +155,14 @@ describe('hydrate', () => {
       stale.instanceId,
       [stale.instanceId],
     ]);
-    expect(root.elementSlots[0]).toEqual([]);
+    // No background child was ever attached at slot 0, so the multi-slot map
+    // never materialized that index. The remove targets the main-thread-only
+    // serialized child directly.
+    expect(root.elementSlots[0]).toBeUndefined();
   });
 
   it('includes nested serialized subtree handles from sparse slots when hydrate removes a stale child', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    root.appendChild(slot);
 
     const stale = createHydrationChild(101, 'stale', {
       elementSlots: [
@@ -204,7 +191,7 @@ describe('hydrate', () => {
       101,
       [101, 102, 103],
     ]);
-    expect(root.elementSlots[0]).toEqual([]);
+    expect(root.elementSlots[0]).toBeUndefined();
     expect(globalCommitContext.nonPayload.removedSubtrees).toEqual([]);
     expect(backgroundElementTemplateInstanceManager.get(101)).toBeUndefined();
     expect(backgroundElementTemplateInstanceManager.get(102)).toBeUndefined();
@@ -213,13 +200,10 @@ describe('hydrate', () => {
 
   it('keeps existing background stale instances on the pending cleanup path during hydrate remove', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    root.appendChild(slot);
 
     const stale = new BackgroundElementTemplateInstance('stale');
     const keep = new BackgroundElementTemplateInstance('keep');
-    slot.appendChild(keep);
+    root.appendChild(keep);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root', {
@@ -244,16 +228,13 @@ describe('hydrate', () => {
 
   it('moves serialized children to match the background slot order', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    root.appendChild(slot);
 
     const a = new BackgroundElementTemplateInstance('a');
     const b = new BackgroundElementTemplateInstance('b');
     const c = new BackgroundElementTemplateInstance('c');
-    slot.appendChild(b);
-    slot.appendChild(a);
-    slot.appendChild(c);
+    root.appendChild(b);
+    root.appendChild(a);
+    root.appendChild(c);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root', {
@@ -279,17 +260,12 @@ describe('hydrate', () => {
 
   it('treats a source-before-target cross-slot hydrate candidate as remove and recreate', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot0 = new BackgroundElementTemplateSlot();
-    slot0.setAttribute('id', 0);
-    root.appendChild(slot0);
-    const slot1 = new BackgroundElementTemplateSlot();
-    slot1.setAttribute('id', 1);
-    root.appendChild(slot1);
 
     const moved = new BackgroundElementTemplateInstance('moved', ['after']);
     const localId = moved.instanceId;
     const mainThreadId = -2;
-    slot1.appendChild(moved);
+    moved.__slotIndex = 1;
+    root.appendChild(moved);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root', {
@@ -319,7 +295,9 @@ describe('hydrate', () => {
       localId,
       0,
     ]);
-    expect(root.elementSlots[0]).toEqual([]);
+    // Slot 0 only had a main-thread-only child that we removed, so the
+    // background map never materialized an entry there.
+    expect(root.elementSlots[0]).toBeUndefined();
     expect(root.elementSlots[1]).toEqual([moved]);
     expect(globalCommitContext.nonPayload.removedSubtrees).toEqual([]);
     expect(backgroundElementTemplateInstanceManager.get(mainThreadId)).toBeUndefined();
@@ -328,17 +306,13 @@ describe('hydrate', () => {
 
   it('does not pull cross-slot hydrate recreate candidates back into a non-empty source slot', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot0 = new BackgroundElementTemplateSlot();
-    slot0.setAttribute('id', 0);
-    root.appendChild(slot0);
-    const slot1 = new BackgroundElementTemplateSlot();
-    slot1.setAttribute('id', 1);
-    root.appendChild(slot1);
 
     const keep = new BackgroundElementTemplateInstance('keep');
     const moved = new BackgroundElementTemplateInstance('moved', ['after']);
-    slot0.appendChild(keep);
-    slot1.appendChild(moved);
+    keep.__slotIndex = 0;
+    moved.__slotIndex = 1;
+    root.appendChild(keep);
+    root.appendChild(moved);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root', {
@@ -379,17 +353,12 @@ describe('hydrate', () => {
 
   it('treats a target-before-source cross-slot hydrate candidate as recreate then remove', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot0 = new BackgroundElementTemplateSlot();
-    slot0.setAttribute('id', 0);
-    root.appendChild(slot0);
-    const slot1 = new BackgroundElementTemplateSlot();
-    slot1.setAttribute('id', 1);
-    root.appendChild(slot1);
 
     const moved = new BackgroundElementTemplateInstance('moved', ['after']);
     const localId = moved.instanceId;
     const mainThreadId = -3;
-    slot0.appendChild(moved);
+    moved.__slotIndex = 0;
+    root.appendChild(moved);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root', {
@@ -420,7 +389,8 @@ describe('hydrate', () => {
       [mainThreadId],
     ]);
     expect(root.elementSlots[0]).toEqual([moved]);
-    expect(root.elementSlots[1]).toEqual([]);
+    // Slot 1 only contained the main-thread-only child that we removed.
+    expect(root.elementSlots[1]).toBeUndefined();
     expect(globalCommitContext.nonPayload.removedSubtrees).toEqual([]);
     expect(backgroundElementTemplateInstanceManager.get(mainThreadId)).toBeUndefined();
     expect(backgroundElementTemplateInstanceManager.get(localId)).toBe(moved);
@@ -428,19 +398,15 @@ describe('hydrate', () => {
 
   it('recreates repeated cross-slot hydrate candidates in their target slot order', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot0 = new BackgroundElementTemplateSlot();
-    slot0.setAttribute('id', 0);
-    root.appendChild(slot0);
-    const slot1 = new BackgroundElementTemplateSlot();
-    slot1.setAttribute('id', 1);
-    root.appendChild(slot1);
 
     const first = new BackgroundElementTemplateInstance('item');
     const second = new BackgroundElementTemplateInstance('item');
     const firstLocalId = first.instanceId;
     const secondLocalId = second.instanceId;
-    slot1.appendChild(first);
-    slot1.appendChild(second);
+    first.__slotIndex = 1;
+    second.__slotIndex = 1;
+    root.appendChild(first);
+    root.appendChild(second);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root', {
@@ -486,7 +452,8 @@ describe('hydrate', () => {
       secondLocalId,
       0,
     ]);
-    expect(root.elementSlots[0]).toEqual([]);
+    // Slot 0 only had main-thread-only children that we removed.
+    expect(root.elementSlots[0]).toBeUndefined();
     expect(root.elementSlots[1]).toEqual([first, second]);
     expect(globalCommitContext.nonPayload.removedSubtrees).toEqual([]);
     expect(backgroundElementTemplateInstanceManager.get(-2)).toBeUndefined();
@@ -497,17 +464,11 @@ describe('hydrate', () => {
 
   it('recreates background children when serialized root has no child slots', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    root.appendChild(slot);
 
     const child = new BackgroundElementTemplateInstance('child', ['background-child']);
-    const childSlot = new BackgroundElementTemplateSlot();
-    childSlot.setAttribute('id', 0);
-    child.appendChild(childSlot);
     const rawText = new BackgroundElementTemplateInstance(BUILTIN_RAW_TEXT_TEMPLATE_KEY, ['NEW']);
-    childSlot.appendChild(rawText);
-    slot.appendChild(child);
+    child.appendChild(rawText);
+    root.appendChild(child);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root'),
@@ -540,13 +501,10 @@ describe('hydrate', () => {
   it('registers event handlers for background-only insertion subtrees during hydrate', () => {
     __etAttrPlanMap.child = [0, adaptEventAttrSlot];
     const root = new BackgroundElementTemplateInstance('root');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    root.appendChild(slot);
     const child = new BackgroundElementTemplateInstance('child');
     const handler = vi.fn();
     child.setAttribute('attributeSlots', [handler]);
-    slot.appendChild(child);
+    root.appendChild(child);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root', {
@@ -574,20 +532,17 @@ describe('hydrate', () => {
 
   it('diffs multiple dynamic children slots independently during hydrate', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot0 = new BackgroundElementTemplateSlot();
-    slot0.setAttribute('id', 0);
-    root.appendChild(slot0);
-    const slot1 = new BackgroundElementTemplateSlot();
-    slot1.setAttribute('id', 1);
-    root.appendChild(slot1);
 
     const newA = new BackgroundElementTemplateInstance('new-a');
-    slot0.appendChild(newA);
+    newA.__slotIndex = 0;
+    root.appendChild(newA);
 
     const b0 = new BackgroundElementTemplateInstance('b0');
     const b1 = new BackgroundElementTemplateInstance('b1');
-    slot1.appendChild(b1);
-    slot1.appendChild(b0);
+    b0.__slotIndex = 1;
+    b1.__slotIndex = 1;
+    root.appendChild(b1);
+    root.appendChild(b0);
 
     const oldAId = -11;
     const stream = hydrate(
@@ -632,17 +587,13 @@ describe('hydrate', () => {
 
   it('does not match same-type children across element slot indexes', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot0 = new BackgroundElementTemplateSlot();
-    slot0.setAttribute('id', 0);
-    root.appendChild(slot0);
-    const slot1 = new BackgroundElementTemplateSlot();
-    slot1.setAttribute('id', 1);
-    root.appendChild(slot1);
 
     const slot0Item = new BackgroundElementTemplateInstance('item', ['B']);
     const slot1Item = new BackgroundElementTemplateInstance('item', ['A']);
-    slot0.appendChild(slot0Item);
-    slot1.appendChild(slot1Item);
+    slot0Item.__slotIndex = 0;
+    slot1Item.__slotIndex = 1;
+    root.appendChild(slot0Item);
+    root.appendChild(slot1Item);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root', {
@@ -670,11 +621,8 @@ describe('hydrate', () => {
 
   it('keeps hydrated handles for later background attribute updates', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    root.appendChild(slot);
     const child = new BackgroundElementTemplateInstance('child', ['before']);
-    slot.appendChild(child);
+    root.appendChild(child);
 
     const childHandleId = -2;
     hydrate(
@@ -810,11 +758,8 @@ describe('hydrate', () => {
 
   it('treats omitted serialized slots as empty arrays', () => {
     const root = new BackgroundElementTemplateInstance('root', ['background-root']);
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    root.appendChild(slot);
     const child = new BackgroundElementTemplateInstance('child');
-    slot.appendChild(child);
+    root.appendChild(child);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root'),
@@ -1010,9 +955,12 @@ describe('hydrate', () => {
 
   it('skips sparse background slot indexes when checking trailing slots', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 2);
-    root.appendChild(slot);
+    // Pre-populate a child at slot index 2 then remove it so the multi-slot map
+    // has a sparse entry without a child at index 2.
+    const placeholder = new BackgroundElementTemplateInstance('placeholder');
+    placeholder.__slotIndex = 2;
+    root.appendChild(placeholder);
+    root.removeChild(placeholder, true);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root', {
@@ -1033,17 +981,11 @@ describe('hydrate', () => {
 
   it('emits create recursively for inserted nested children', () => {
     const root = new BackgroundElementTemplateInstance('root');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    root.appendChild(slot);
 
     const child = new BackgroundElementTemplateInstance('child');
-    const childSlot = new BackgroundElementTemplateSlot();
-    childSlot.setAttribute('id', 0);
-    child.appendChild(childSlot);
     const grandchild = new BackgroundElementTemplateInstance('grandchild');
-    childSlot.appendChild(grandchild);
-    slot.appendChild(child);
+    child.appendChild(grandchild);
+    root.appendChild(child);
 
     const stream = hydrate(
       createHydrationTemplate(root.instanceId, 'root', {
diff --git a/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts b/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
index 77e645fb43..3cbbe6bff9 100644
--- a/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
+++ b/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
@@ -12,7 +12,6 @@ import {
 import { destroyElementTemplateBackgroundRuntime } from '../../../../src/element-template/background/destroy.js';
 import {
   BackgroundElementTemplateInstance,
-  BackgroundElementTemplateSlot,
   BUILTIN_RAW_TEXT_TEMPLATE_KEY,
 } from '../../../../src/element-template/background/instance.js';
 import { backgroundElementTemplateInstanceManager } from '../../../../src/element-template/background/manager.js';
@@ -61,25 +60,12 @@ describe('BackgroundElementTemplateInstance', () => {
     expect(globalCommitContext.ops).toEqual([]);
   });
 
-  it('does not emit create for synthetic slot containers after hydration', () => {
-    markElementTemplateHydrated();
-    globalCommitContext.ops = [];
-
-    new BackgroundElementTemplateSlot();
-
-    expect(globalCommitContext.ops).toEqual([]);
-  });
-
   it('exposes DOM-compatible tree accessors for Preact removal paths', () => {
     const parent = new BackgroundElementTemplateInstance('view');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    parent.appendChild(slot);
     const child = new BackgroundElementTemplateInstance('image');
-    slot.appendChild(child);
+    parent.appendChild(child);
 
-    expect(parent.childNodes).toEqual([slot]);
-    expect(slot.childNodes).toEqual([child]);
+    expect(parent.childNodes).toEqual([child]);
 
     markElementTemplateHydrated();
     parent.markCreateEmittedForHydration();
@@ -87,7 +73,7 @@ describe('BackgroundElementTemplateInstance', () => {
     globalCommitContext.ops = [];
     child.parentNode?.removeChild(child);
 
-    expect(slot.childNodes).toEqual([]);
+    expect(parent.childNodes).toEqual([]);
     expect(child.parentNode).toBeNull();
     expect(parent.elementSlots[0]).toEqual([]);
     expect(globalCommitContext.ops).toEqual([
@@ -177,9 +163,6 @@ describe('BackgroundElementTemplateInstance', () => {
 
     it('emits create with initialized attrs before inserting a post-hydration template', () => {
       const parent = new BackgroundElementTemplateInstance('view');
-      const slot = new BackgroundElementTemplateSlot();
-      slot.setAttribute('id', 0);
-      parent.appendChild(slot);
       parent.emitCreate();
 
       markElementTemplateHydrated();
@@ -190,7 +173,7 @@ describe('BackgroundElementTemplateInstance', () => {
 
       expect(globalCommitContext.ops).toEqual([]);
 
-      slot.appendChild(child);
+      parent.appendChild(child);
 
       expect(globalCommitContext.ops).toEqual([
         1,
@@ -207,20 +190,17 @@ describe('BackgroundElementTemplateInstance', () => {
       ]);
     });
 
-    it('honors a non-null beforeChild anchor on legacy slot inserts', () => {
+    it('honors a non-null beforeChild anchor on inserts within the same slot', () => {
       const parent = new BackgroundElementTemplateInstance('view');
-      const slot = new BackgroundElementTemplateSlot();
-      slot.setAttribute('id', 0);
-      parent.appendChild(slot);
       const anchor = new BackgroundElementTemplateInstance('text');
-      slot.appendChild(anchor);
+      parent.appendChild(anchor);
       parent.emitCreate();
 
       markElementTemplateHydrated();
       globalCommitContext.ops = [];
 
       const incoming = new BackgroundElementTemplateInstance('image');
-      slot.insertBefore(incoming, anchor);
+      parent.insertBefore(incoming, anchor);
 
       expect(globalCommitContext.ops.slice(-5)).toEqual([
         3,
@@ -231,26 +211,20 @@ describe('BackgroundElementTemplateInstance', () => {
       ]);
     });
 
-    it('defers nested slot inserts until the owner template is created', () => {
+    it('defers nested inserts until the owner template is created', () => {
       const parent = new BackgroundElementTemplateInstance('view');
-      const slot = new BackgroundElementTemplateSlot();
-      slot.setAttribute('id', 0);
-      parent.appendChild(slot);
       parent.emitCreate();
 
       markElementTemplateHydrated();
       globalCommitContext.ops = [];
 
       const owner = new BackgroundElementTemplateInstance('view');
-      const ownerSlot = new BackgroundElementTemplateSlot();
-      ownerSlot.setAttribute('id', 0);
-      owner.appendChild(ownerSlot);
       const nested = createTextNode('nested');
-      ownerSlot.appendChild(nested);
+      owner.appendChild(nested);
 
       expect(globalCommitContext.ops).toEqual([]);
 
-      slot.appendChild(owner);
+      parent.appendChild(owner);
 
       expect(globalCommitContext.ops).toEqual([
         1,
@@ -275,9 +249,6 @@ describe('BackgroundElementTemplateInstance', () => {
 
     it('skips sparse child slots when creating a post-hydration template recursively', () => {
       const parent = new BackgroundElementTemplateInstance('view');
-      const slot = new BackgroundElementTemplateSlot();
-      slot.setAttribute('id', 0);
-      parent.appendChild(slot);
       parent.emitCreate();
 
       markElementTemplateHydrated();
@@ -285,7 +256,7 @@ describe('BackgroundElementTemplateInstance', () => {
 
       const child = new BackgroundElementTemplateInstance('view');
       child.elementSlots.length = 1;
-      slot.appendChild(child);
+      parent.appendChild(child);
 
       const serializedSlots = globalCommitContext.ops[5] as unknown[];
       expect(globalCommitContext.ops[0]).toBe(1);
@@ -449,25 +420,19 @@ describe('BackgroundElementTemplateInstance', () => {
       expect(() => parent.removeChild(other)).toThrow('Node is not a child of this parent');
     });
 
-    it('emits remove ops when removing from a slot container', () => {
+    it('emits remove ops when removing a child routed via __slotIndex', () => {
       const parent = new BackgroundElementTemplateInstance('view');
-      const slot = new BackgroundElementTemplateSlot();
-      slot.setAttribute('id', 0);
-      parent.appendChild(slot);
       const child = new BackgroundElementTemplateInstance('text');
-      const childSlot = new BackgroundElementTemplateSlot();
-      childSlot.setAttribute('id', 0);
       const grandchild = new BackgroundElementTemplateInstance('text');
-      child.appendChild(childSlot);
-      childSlot.appendChild(grandchild);
-      slot.appendChild(child);
+      child.appendChild(grandchild);
+      parent.appendChild(child);
 
       markElementTemplateHydrated();
       parent.markCreateEmittedForHydration();
       child.markCreateEmittedForHydration();
       grandchild.markCreateEmittedForHydration();
       globalCommitContext.ops = [];
-      slot.removeChild(child);
+      parent.removeChild(child);
 
       expect(parent.elementSlots[0]).toEqual([]);
       expect(globalCommitContext.ops).toEqual([
@@ -482,16 +447,13 @@ describe('BackgroundElementTemplateInstance', () => {
 
     it('does not emit patches for pre-hydration slot mutations', () => {
       const parent = new BackgroundElementTemplateInstance('view');
-      const slot = new BackgroundElementTemplateSlot();
-      slot.setAttribute('id', 0);
-      parent.appendChild(slot);
       const child = new BackgroundElementTemplateInstance('text');
       const childId = child.instanceId;
 
       globalCommitContext.ops = [];
       child.setAttribute('attributeSlots', ['pending']);
-      slot.appendChild(child);
-      slot.removeChild(child);
+      parent.appendChild(child);
+      parent.removeChild(child);
 
       expect(parent.elementSlots[0]).toEqual([]);
       expect(globalCommitContext.ops).toEqual([]);
@@ -499,16 +461,13 @@ describe('BackgroundElementTemplateInstance', () => {
       expect(backgroundElementTemplateInstanceManager.get(childId)).toBeUndefined();
     });
 
-    it('supports silent removal from a slot container', () => {
+    it('supports silent removal of a slot child', () => {
       const parent = new BackgroundElementTemplateInstance('view');
-      const slot = new BackgroundElementTemplateSlot();
-      slot.setAttribute('id', 0);
-      parent.appendChild(slot);
       const child = new BackgroundElementTemplateInstance('text');
-      slot.appendChild(child);
+      parent.appendChild(child);
 
       globalCommitContext.ops = [];
-      slot.removeChild(child, true);
+      parent.removeChild(child, true);
 
       expect(parent.elementSlots[0]).toEqual([]);
       expect(globalCommitContext.ops).toEqual([]);
@@ -517,13 +476,13 @@ describe('BackgroundElementTemplateInstance', () => {
 
     it('clears cached elementSlots when removing a slot child', () => {
       const parent = new BackgroundElementTemplateInstance('view');
-      const slot = new BackgroundElementTemplateSlot();
-      slot.setAttribute('id', 1);
-      parent.appendChild(slot);
+      const child = new BackgroundElementTemplateInstance('text');
+      child.__slotIndex = 1;
+      parent.appendChild(child);
 
-      expect(parent.elementSlots[1]).toEqual([]);
+      expect(parent.elementSlots[1]).toEqual([child]);
 
-      parent.removeChild(slot, true);
+      parent.removeChild(child, true);
 
       expect(parent.elementSlots[1]).toEqual([]);
     });
@@ -638,9 +597,6 @@ describe('BackgroundElementTemplateInstance', () => {
 
   it('defers raw-text patches until inserting a post-hydration text node', () => {
     const parent = new BackgroundElementTemplateInstance('view');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 0);
-    parent.appendChild(slot);
     parent.emitCreate();
 
     markElementTemplateHydrated();
@@ -651,7 +607,7 @@ describe('BackgroundElementTemplateInstance', () => {
 
     expect(globalCommitContext.ops).toEqual([]);
 
-    slot.appendChild(textNode);
+    parent.appendChild(textNode);
 
     expect(globalCommitContext.ops).toEqual([
       1,
@@ -679,13 +635,6 @@ describe('BackgroundElementTemplateInstance', () => {
   });
 });
 
-describe('BackgroundElementTemplateSlot', () => {
-  it('should have correct type', () => {
-    const slot = new BackgroundElementTemplateSlot();
-    expect(slot.type).toBe('slot');
-  });
-});
-
 describe('Background raw-text instance', () => {
   it('should have correct type and text', () => {
     const textNode = createTextNode('hello');
@@ -1080,126 +1029,6 @@ describe('BackgroundElementTemplateInstance Shadow State', () => {
   });
 });
 
-describe('BackgroundElementTemplateSlot Children', () => {
-  it('should update partId for slot when setAttribute is called', () => {
-    const slot = new BackgroundElementTemplateSlot();
-    slot.setAttribute('id', 10);
-    expect(slot.partId).toBe(10);
-  });
-
-  it('should clear the previous slot index when partId changes after attachment', () => {
-    const root = new BackgroundElementTemplateInstance('element-template-view');
-    const slot = new BackgroundElementTemplateSlot();
-    const text = createTextNode('move');
-    slot.setAttribute('id', 0);
-    slot.appendChild(text);
-    root.appendChild(slot);
-
-    slot.setAttribute('id', 1);
-
-    expect(root.elementSlots[0]).toEqual([]);
-    expect(root.elementSlots[1]).toEqual([text]);
-  });
-
-  it('should keep elementSlots in sync when slot is attached after children exist', () => {
-    const root = new BackgroundElementTemplateInstance('element-template-view');
-    const slot = new BackgroundElementTemplateSlot();
-    const text = createTextNode('late');
-
-    slot.setAttribute('id', 2);
-    slot.appendChild(text);
-    root.appendChild(slot);
-
-    expect(root.elementSlots[2]).toEqual([text]);
-  });
-
-  it('should move slot children to the new slot index when partId changes', () => {
-    const root = new BackgroundElementTemplateInstance('element-template-view');
-    const slot = new BackgroundElementTemplateSlot();
-    const text = createTextNode('move');
-
-    slot.setAttribute('id', 0);
-    slot.appendChild(text);
-    root.appendChild(slot);
-    slot.setAttribute('id', 3);
-
-    expect(root.elementSlots[0]).toEqual([]);
-    expect(root.elementSlots[3]).toEqual([text]);
-  });
-
-  it('should detach a moved child from the old slot shadow state when silent reparenting', () => {
-    const root = new BackgroundElementTemplateInstance('element-template-view');
-    const slotA = new BackgroundElementTemplateSlot();
-    const slotB = new BackgroundElementTemplateSlot();
-    const text = createTextNode('move');
-
-    slotA.setAttribute('id', 0);
-    slotB.setAttribute('id', 1);
-    root.appendChild(slotA);
-    root.appendChild(slotB);
-    slotA.appendChild(text);
-
-    slotB.insertBefore(text, null, true);
-
-    expect(root.elementSlots[0]).toEqual([]);
-    expect(root.elementSlots[1]).toEqual([text]);
-    expect(slotA.firstChild).toBeNull();
-    expect(slotB.firstChild).toBe(text);
-  });
-
-  it('should detach a moved child from the old parent slot shadow state', () => {
-    const rootA = new BackgroundElementTemplateInstance('element-template-view');
-    const rootB = new BackgroundElementTemplateInstance('element-template-view');
-    const slotA = new BackgroundElementTemplateSlot();
-    const slotB = new BackgroundElementTemplateSlot();
-    const text = createTextNode('move');
-
-    slotA.setAttribute('id', 0);
-    slotB.setAttribute('id', 0);
-    rootA.appendChild(slotA);
-    rootB.appendChild(slotB);
-    slotA.appendChild(text);
-
-    slotB.insertBefore(text, null, true);
-
-    expect(rootA.elementSlots[0]).toEqual([]);
-    expect(rootB.elementSlots[0]).toEqual([text]);
-    expect(slotA.firstChild).toBeNull();
-    expect(slotB.firstChild).toBe(text);
-  });
-
-  it('routes non-slot direct children into elementSlots keyed by __slotIndex', () => {
-    const root = new BackgroundElementTemplateInstance('element-template-view');
-    const view = new BackgroundElementTemplateInstance('view');
-    // Default __slotIndex is 0, matching Preact's baseline assignment in
-    // diffElementNodes; multi-slot output reuses this without a slot wrapper.
-    root.appendChild(view);
-
-    expect(root.elementSlots).toEqual([[view]]);
-  });
-
-  it('groups non-slot direct children by __slotIndex without a slot wrapper', () => {
-    const root = new BackgroundElementTemplateInstance('element-template-view');
-    const slot0Child = new BackgroundElementTemplateInstance('view');
-    const slot1Child = new BackgroundElementTemplateInstance('text');
-    slot0Child.__slotIndex = 0;
-    slot1Child.__slotIndex = 1;
-    root.appendChild(slot0Child);
-    root.appendChild(slot1Child);
-
-    expect(root.elementSlots).toEqual([[slot0Child], [slot1Child]]);
-  });
-
-  it('does not create an element slot entry for slot with default partId', () => {
-    const root = new BackgroundElementTemplateInstance('element-template-view');
-    const slot = new BackgroundElementTemplateSlot();
-    slot.appendChild(createTextNode('Hello'));
-    root.appendChild(slot);
-
-    expect(root.elementSlots).toEqual([]);
-  });
-});
-
 describe('Multi-slot inserts and removes without a slot wrapper', () => {
   beforeEach(() => {
     globalThis.__MAIN_THREAD__ = false;
diff --git a/packages/react/runtime/__test__/element-template/runtime/components/slot.test.ts b/packages/react/runtime/__test__/element-template/runtime/components/slot.test.ts
deleted file mode 100644
index b7a109c2fc..0000000000
--- a/packages/react/runtime/__test__/element-template/runtime/components/slot.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Copyright 2024 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { __etSlot } from '../../../../src/element-template/internal.js';
-
-describe('__etSlot', () => {
-  afterEach(() => {
-    vi.unstubAllGlobals();
-  });
-
-  it('should throw in main thread', () => {
-    vi.stubGlobal('__BACKGROUND__', false);
-    const children = 'test children';
-    expect(() => __etSlot(0, children)).toThrow(
-      '__etSlot() should not run on the main thread. LEPUS ET children are lowered to slot arrays at compile time.',
-    );
-  });
-});
diff --git a/packages/react/runtime/__test__/element-template/runtime/hydration/hydration-listener.test.ts b/packages/react/runtime/__test__/element-template/runtime/hydration/hydration-listener.test.ts
index be94658d2b..cfc706fd92 100644
--- a/packages/react/runtime/__test__/element-template/runtime/hydration/hydration-listener.test.ts
+++ b/packages/react/runtime/__test__/element-template/runtime/hydration/hydration-listener.test.ts
@@ -6,10 +6,7 @@ import {
   installElementTemplateHydrationListener,
   resetElementTemplateHydrationListener,
 } from '../../../../src/element-template/background/hydration-listener.js';
-import {
-  BackgroundElementTemplateInstance,
-  BackgroundElementTemplateSlot,
-} from '../../../../src/element-template/background/instance.js';
+import { BackgroundElementTemplateInstance } from '../../../../src/element-template/background/instance.js';
 import { backgroundElementTemplateInstanceManager } from '../../../../src/element-template/background/manager.js';
 import { PerformanceTimingFlags, PipelineOrigins } from '../../../../src/element-template/lynx/performance.js';
 import {
@@ -103,9 +100,6 @@ describe('ElementTemplate hydration listener', () => {
 
       const backgroundRoot = __root as BackgroundElementTemplateInstance;
       const host = new BackgroundElementTemplateInstance('_et_test');
-      const slot = new BackgroundElementTemplateSlot();
-      slot.setAttribute('id', 0);
-      host.appendChild(slot);
       backgroundRoot.appendChild(host);
       const stale = new BackgroundElementTemplateInstance('_et_stale');
 
@@ -145,9 +139,6 @@ describe('ElementTemplate hydration listener', () => {
 
       const backgroundRoot = __root as BackgroundElementTemplateInstance;
       const host = new BackgroundElementTemplateInstance('_et_test');
-      const slot = new BackgroundElementTemplateSlot();
-      slot.setAttribute('id', 0);
-      host.appendChild(slot);
       backgroundRoot.appendChild(host);
       const stale = new BackgroundElementTemplateInstance('_et_stale');
 
diff --git a/packages/react/runtime/src/element-template/background/document.ts b/packages/react/runtime/src/element-template/background/document.ts
index f87354ba5b..f098e6995e 100644
--- a/packages/react/runtime/src/element-template/background/document.ts
+++ b/packages/react/runtime/src/element-template/background/document.ts
@@ -4,11 +4,7 @@
 
 import { options } from 'preact';
 
-import {
-  BUILTIN_RAW_TEXT_TEMPLATE_KEY,
-  BackgroundElementTemplateInstance,
-  BackgroundElementTemplateSlot,
-} from './instance.js';
+import { BUILTIN_RAW_TEXT_TEMPLATE_KEY, BackgroundElementTemplateInstance } from './instance.js';
 
 export interface BackgroundElementTemplateDocument {
   createElement(type: string): BackgroundElementTemplateInstance;
@@ -23,11 +19,6 @@ export interface BackgroundElementTemplateDocument {
 export function setupBackgroundElementTemplateDocument(): BackgroundElementTemplateDocument {
   const doc = {
     createElement(type: string): BackgroundElementTemplateInstance {
-      // Legacy bundles still emit `<slot id=N>` wrappers; keep that path so
-      // pre-multi-slot output keeps routing children via the slot wrapper.
-      if (type === 'slot') {
-        return new BackgroundElementTemplateSlot();
-      }
       return new BackgroundElementTemplateInstance(type);
     },
     createElementNS(
@@ -35,9 +26,6 @@ export function setupBackgroundElementTemplateDocument(): BackgroundElementTempl
       type: string,
       _options?: unknown,
     ): BackgroundElementTemplateInstance {
-      if (type === 'slot') {
-        return new BackgroundElementTemplateSlot();
-      }
       return new BackgroundElementTemplateInstance(type);
     },
     createTextNode(text: string): BackgroundElementTemplateInstance {
diff --git a/packages/react/runtime/src/element-template/background/instance.ts b/packages/react/runtime/src/element-template/background/instance.ts
index 98d7462610..70f8d057b0 100644
--- a/packages/react/runtime/src/element-template/background/instance.ts
+++ b/packages/react/runtime/src/element-template/background/instance.ts
@@ -30,17 +30,6 @@ function stringifyRawTextValue(value: SerializableValue | undefined): string {
   return '';
 }
 
-function syncElementSlotChildren(
-  parent: BackgroundElementTemplateInstance | null,
-  slotId: number,
-  children: BackgroundElementTemplateInstance[],
-): void {
-  if (!parent || slotId < 0) {
-    return;
-  }
-  parent.elementSlots[slotId] = [...children];
-}
-
 function collectMultiSlotChildrenForSlot(
   parent: BackgroundElementTemplateInstance,
   slotId: number,
@@ -48,9 +37,7 @@ function collectMultiSlotChildrenForSlot(
   const res: BackgroundElementTemplateInstance[] = [];
   let child = parent.firstChild;
   while (child) {
-    // Skip legacy slot wrappers; their content is projected separately so they
-    // do not participate in the multi-slot routing keyed off __slotIndex.
-    if (!(child instanceof BackgroundElementTemplateSlot) && child.__slotIndex === slotId) {
+    if (child.__slotIndex === slotId) {
       res.push(child);
     }
     child = child.nextSibling;
@@ -198,62 +185,27 @@ export class BackgroundElementTemplateInstance {
       child.nextSibling = null;
     }
 
-    if (child instanceof BackgroundElementTemplateSlot) {
-      syncElementSlotChildren(this, child.partId, collectChildren(child));
-    }
-
-    if (this instanceof BackgroundElementTemplateSlot) {
-      const slotId = this.partId;
-      const parent = this.parent;
-      if (parent) {
-        syncElementSlotChildren(parent, slotId, collectChildren(this));
-      }
-      if (silent) {
-        return;
-      }
-      if (slotId !== -1 && parent) {
-        if (!parent.canEmitPatch()) {
-          return;
-        }
-        const beforeId = beforeChild ? beforeChild.instanceId : 0;
-        emitCreateRecursive(child);
-        pushOp(
-          ElementTemplateUpdateOps.insertNode,
-          parent.instanceId,
-          slotId,
-          child.instanceId,
-          beforeId,
-        );
-      }
+    const slotId = child.__slotIndex;
+    syncMultiSlotChildren(this, slotId);
+    if (silent) {
       return;
     }
-
-    // Multi-slot path: child sits directly under a template (no <slot> wrapper)
-    // and carries __slotIndex set by Preact via $N props.
-    if (!(child instanceof BackgroundElementTemplateSlot)) {
-      const slotId = child.__slotIndex;
-      syncMultiSlotChildren(this, slotId);
-      if (silent) {
-        return;
-      }
-      if (!this.canEmitPatch()) {
-        return;
-      }
-      // beforeChild may live in another slot — fall back to no anchor so the
-      // child appends at the slot's tail. Same-slot reference is honored.
-      const beforeId = beforeChild && !(beforeChild instanceof BackgroundElementTemplateSlot)
-          && beforeChild.__slotIndex === slotId
-        ? beforeChild.instanceId
-        : 0;
-      emitCreateRecursive(child);
-      pushOp(
-        ElementTemplateUpdateOps.insertNode,
-        this.instanceId,
-        slotId,
-        child.instanceId,
-        beforeId,
-      );
+    if (!this.canEmitPatch()) {
+      return;
     }
+    // beforeChild may live in another slot — fall back to no anchor so the
+    // child appends at the slot's tail. Same-slot reference is honored.
+    const beforeId = beforeChild && beforeChild.__slotIndex === slotId
+      ? beforeChild.instanceId
+      : 0;
+    emitCreateRecursive(child);
+    pushOp(
+      ElementTemplateUpdateOps.insertNode,
+      this.instanceId,
+      slotId,
+      child.instanceId,
+      beforeId,
+    );
   }
 
   removeChild(child: BackgroundElementTemplateInstance, silent?: boolean): void {
@@ -277,65 +229,29 @@ export class BackgroundElementTemplateInstance {
     child.nextSibling = null;
     child.previousSibling = null;
 
-    if (child instanceof BackgroundElementTemplateSlot && child.partId >= 0) {
-      this.elementSlots[child.partId] = [];
-    }
-
-    if (this instanceof BackgroundElementTemplateSlot) {
-      const slotId = this.partId;
-      const parent = this.parent;
-      if (parent) {
-        syncElementSlotChildren(parent, slotId, collectChildren(this));
-      }
-      if (silent) {
-        return;
-      }
-      if (slotId !== -1 && parent) {
-        if (!parent.canEmitPatch()) {
-          if (child.isPendingCreate()) {
-            // A never-created subtree has no main-thread registry entry, so it
-            // can be released from the background manager without delayed cleanup.
-            child.tearDown();
-          }
-          return;
-        }
-        pushOp(
-          ElementTemplateUpdateOps.removeNode,
-          parent.instanceId,
-          slotId,
-          child.instanceId,
-          collectElementTemplateSubtreeHandleIds(child),
-        );
-        // The removed JS object graph may outlive the detach until GC, so keep
-        // it pending and tear it down on the Snapshot-aligned delayed boundary.
-        markRemovedSubtreeForCurrentCommit(child);
-      }
+    const slotId = child.__slotIndex;
+    syncMultiSlotChildren(this, slotId);
+    if (silent) {
       return;
     }
-
-    // Multi-slot path mirror of insertBefore: child carries __slotIndex and the
-    // op references (this, slotId, child) directly with no slot wrapper.
-    if (!(child instanceof BackgroundElementTemplateSlot)) {
-      const slotId = child.__slotIndex;
-      syncMultiSlotChildren(this, slotId);
-      if (silent) {
-        return;
-      }
-      if (!this.canEmitPatch()) {
-        if (child.isPendingCreate()) {
-          child.tearDown();
-        }
-        return;
+    if (!this.canEmitPatch()) {
+      if (child.isPendingCreate()) {
+        // A never-created subtree has no main-thread registry entry, so it
+        // can be released from the background manager without delayed cleanup.
+        child.tearDown();
       }
-      pushOp(
-        ElementTemplateUpdateOps.removeNode,
-        this.instanceId,
-        slotId,
-        child.instanceId,
-        collectElementTemplateSubtreeHandleIds(child),
-      );
-      markRemovedSubtreeForCurrentCommit(child);
+      return;
     }
+    pushOp(
+      ElementTemplateUpdateOps.removeNode,
+      this.instanceId,
+      slotId,
+      child.instanceId,
+      collectElementTemplateSubtreeHandleIds(child),
+    );
+    // The removed JS object graph may outlive the detach until GC, so keep
+    // it pending and tear it down on the Snapshot-aligned delayed boundary.
+    markRemovedSubtreeForCurrentCommit(child);
   }
 
   tearDown(): void {
@@ -416,13 +332,6 @@ export class BackgroundElementTemplateInstance {
           nextValue ?? null,
         );
       }
-    } else if (key === 'id' && this instanceof BackgroundElementTemplateSlot) {
-      const previousPartId = this.partId;
-      this.partId = Number(value);
-      if (this.parent && previousPartId >= 0 && previousPartId !== this.partId) {
-        this.parent.elementSlots[previousPartId] = [];
-      }
-      syncElementSlotChildren(this.parent, this.partId, collectChildren(this));
     } else {
       return;
     }
@@ -455,14 +364,6 @@ export class BackgroundElementTemplateInstance {
   }
 }
 
-export class BackgroundElementTemplateSlot extends BackgroundElementTemplateInstance {
-  public partId: number = -1;
-
-  constructor() {
-    super('slot');
-  }
-}
-
 export function collectElementTemplateSubtreeHandleIds(
   root: BackgroundElementTemplateInstance,
 ): number[] {
@@ -475,7 +376,7 @@ function collectElementTemplateSubtreeHandleIdsImpl(
   instance: BackgroundElementTemplateInstance,
   handles: number[],
 ): void {
-  if (!(instance instanceof BackgroundElementTemplateSlot) && instance.instanceId !== 0) {
+  if (instance.instanceId !== 0) {
     handles.push(instance.instanceId);
   }
   let child = instance.firstChild;
@@ -489,7 +390,6 @@ function emitCreateRecursive(instance: BackgroundElementTemplateInstance): void
   if (
     !isElementTemplateHydrated()
     || instance.instanceId < 0
-    || instance instanceof BackgroundElementTemplateSlot
   ) {
     return;
   }
@@ -504,13 +404,3 @@ function emitCreateRecursive(instance: BackgroundElementTemplateInstance): void
   }
   instance.emitCreate();
 }
-
-function collectChildren(slot: BackgroundElementTemplateSlot): BackgroundElementTemplateInstance[] {
-  const res: BackgroundElementTemplateInstance[] = [];
-  let child = slot.firstChild;
-  while (child) {
-    res.push(child);
-    child = child.nextSibling;
-  }
-  return res;
-}
diff --git a/packages/react/runtime/src/element-template/internal.ts b/packages/react/runtime/src/element-template/internal.ts
index 90bd6e48cc..49d4117f13 100644
--- a/packages/react/runtime/src/element-template/internal.ts
+++ b/packages/react/runtime/src/element-template/internal.ts
@@ -53,5 +53,4 @@ export type { Options } from 'preact';
 // export { transformToWorklet } from '../worklet/call/transformToWorklet.js';
 // export { registerWorkletOnBackground } from '../worklet/hmr.js';
 // export { loadWorkletRuntime } from '@lynx-js/react/worklet-runtime/bindings';
-export { __etSlot } from './runtime/components/slot.js';
 export { __etAttrPlanMap, adaptEventAttrSlot, adaptSpreadAttrSlot } from './runtime/template/attr-slot-plan.js';
diff --git a/packages/react/runtime/src/element-template/runtime/components/slot.ts b/packages/react/runtime/src/element-template/runtime/components/slot.ts
deleted file mode 100644
index 0a0fd9c833..0000000000
--- a/packages/react/runtime/src/element-template/runtime/components/slot.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright 2025 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-import type { ComponentChild, ComponentChildren } from 'preact';
-import { createElement } from 'preact';
-
-/**
- * @internal
- */
-export function __etSlot(id: number, children: ComponentChildren): ComponentChild {
-  if (__BACKGROUND__) {
-    return createElement('slot', { id }, children);
-  }
-  throw new Error(
-    '__etSlot() should not run on the main thread. LEPUS ET children are lowered to slot arrays at compile time.',
-  );
-}

From f1d59717e43b478c6b679aeca044affc2ad61731 Mon Sep 17 00:00:00 2001
From: Yiming Li <yimingli.cs@gmail.com>
Date: Mon, 18 May 2026 11:26:06 +0800
Subject: [PATCH 06/12] test(react): drop placeholder hack from hydrate
 fixtures
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`children.iterates-existing-slots` and `children.missing-attrs-element`
attached then silently removed dummy children only to materialize empty
slot indexes on `instance.elementSlots`. The hydrate loop iterates over
`Math.max(serialized.length, instance.length)` and treats an empty
serialized `[]` slot as truthy, so background-side materialization isn't
required — the loop fires either way and the test outcomes are
identical without the dance.
---
 .../hydrate/background-hydrate/_shared.tsx        | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx
index 2c44cced60..7475208e3f 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx
@@ -485,16 +485,6 @@ export function runCaseByName(name: string): unknown {
     backgroundElementTemplateInstanceManager.nextId = 0;
 
     const rootInstance = new BackgroundElementTemplateInstance('root');
-    // Materialize slot indexes 0 and 1 in the multi-slot map by attaching and
-    // then silently removing placeholder children at each index.
-    const placeholder0 = new BackgroundElementTemplateInstance('placeholder');
-    placeholder0.__slotIndex = 0;
-    rootInstance.appendChild(placeholder0);
-    rootInstance.removeChild(placeholder0, true);
-    const placeholder1 = new BackgroundElementTemplateInstance('placeholder');
-    placeholder1.__slotIndex = 1;
-    rootInstance.appendChild(placeholder1);
-    rootInstance.removeChild(placeholder1, true);
 
     const before = createHydrationTemplate(-1, 'root', { elementSlots: [[], []] });
     const stream = hydrateBackground(before, rootInstance);
@@ -508,11 +498,6 @@ export function runCaseByName(name: string): unknown {
     backgroundElementTemplateInstanceManager.nextId = 0;
 
     const rootInstance = new BackgroundElementTemplateInstance('root');
-    // Materialize slot index 0 in the multi-slot map via a transient placeholder.
-    const placeholder = new BackgroundElementTemplateInstance('placeholder');
-    placeholder.__slotIndex = 0;
-    rootInstance.appendChild(placeholder);
-    rootInstance.removeChild(placeholder, true);
 
     const before = createHydrationTemplate(-1, 'root', { elementSlots: [[]] });
     const stream = hydrateBackground(before, rootInstance);

From 99a30b465fb45d4797d61121fc3520fcf6c04bb2 Mon Sep 17 00:00:00 2001
From: Yiming Li <yimingli.cs@gmail.com>
Date: Mon, 18 May 2026 11:30:41 +0800
Subject: [PATCH 07/12] chore: drop public package bump from ET multi-slot
 changeset

---
 .changeset/et-multi-slots.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/.changeset/et-multi-slots.md b/.changeset/et-multi-slots.md
index 20187cb3dd..6b36aeeaff 100644
--- a/.changeset/et-multi-slots.md
+++ b/.changeset/et-multi-slots.md
@@ -1,7 +1,5 @@
 ---
-"@lynx-js/react": patch
----
 
-feat(react): apply multi-slot routing to element-template background tree
+---
 
-Element-template's background runtime now consumes Preact's `__slotIndex` directly instead of going through a `BackgroundElementTemplateSlot` wrapper. The SWC `swc_plugin_element_template` lowering emits `$0`, `$1`, ... named-slot JSX props in place of `__etSlot(N, ...)` wrapper-call children, so the main-thread `renderToOpcodes` and the background `insertBefore`/`removeChild` both key insert and remove ops off the child's own slot index. The legacy `BackgroundElementTemplateSlot` is kept for bundles compiled before this change.
+No package release is required because this change continues the unpublished Element Template runtime path behind the experimental `experimental_useElementTemplate` flag. The SWC `swc_plugin_element_template` lowering now emits `$0`, `$1`, ... named-slot JSX props instead of `__etSlot(N, ...)` wrapper calls, the background runtime routes inserts/removes off `child.__slotIndex` directly, and the legacy `BackgroundElementTemplateSlot` wrapper + `__etSlot` runtime component are removed. Only internal runtime, transform, fixtures, and tests change — public APIs, package exports, and release-facing defaults are unchanged.

From b295b6e63b5ddaed3fac8b3dcacf8977e0192ff1 Mon Sep 17 00:00:00 2001
From: Yiming Li <yimingli.cs@gmail.com>
Date: Mon, 18 May 2026 12:05:13 +0800
Subject: [PATCH 08/12] fix(react): keep ET sibling chain in lock-step with
 cross-slot append-tail

When `parent.insertBefore(child, beforeChild)` is called with a cross-slot
`beforeChild`, the op emits `beforeId = 0` so the main-thread slot
appends `child` to its tail. The local sibling chain previously still
inserted `child` literally before `beforeChild`, which made
`syncMultiSlotChildren` filter the chain by `__slotIndex` into
`[..., child, existingSlotTail]` while main thread saw
`[..., existingSlotTail, child]`. Subsequent ops keyed off the local
order would then desync from main.

Treat a cross-slot `beforeChild` as null for the linked-list mutation
too, so both sides see append-tail. Same-slot anchors still honor the
insertion position. Reported by CodeRabbit on PR #2651.
---
 .../runtime/background/instance.test.ts       | 22 +++++++++++++
 .../element-template/background/instance.ts   | 32 +++++++++++--------
 2 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts b/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
index 3cbbe6bff9..9d303a3fe9 100644
--- a/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
+++ b/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
@@ -1139,4 +1139,26 @@ describe('Multi-slot inserts and removes without a slot wrapper', () => {
       0,
     ]);
   });
+
+  it('keeps elementSlots[slotId] in lock-step with append-tail when anchor is cross-slot', () => {
+    const parent = new BackgroundElementTemplateInstance('view');
+    const slot0Tail = new BackgroundElementTemplateInstance('text');
+    slot0Tail.__slotIndex = 0;
+    const crossSlotAnchor = new BackgroundElementTemplateInstance('text');
+    crossSlotAnchor.__slotIndex = 1;
+    parent.appendChild(slot0Tail);
+    parent.appendChild(crossSlotAnchor);
+
+    const incoming = new BackgroundElementTemplateInstance('text');
+    incoming.__slotIndex = 0;
+    // Preact may pick a cross-slot DOM cursor as the anchor when a node moves
+    // between slots. The op emits `beforeId = 0` (append-tail), so the local
+    // sibling chain must also append-tail; otherwise filtering the chain by
+    // __slotIndex would yield [incoming, slot0Tail] while main thread sees
+    // [slot0Tail, incoming].
+    parent.insertBefore(incoming, crossSlotAnchor);
+
+    expect(parent.elementSlots[0]).toEqual([slot0Tail, incoming]);
+    expect(parent.lastChild).toBe(incoming);
+  });
 });
diff --git a/packages/react/runtime/src/element-template/background/instance.ts b/packages/react/runtime/src/element-template/background/instance.ts
index 70f8d057b0..f8560e2eb6 100644
--- a/packages/react/runtime/src/element-template/background/instance.ts
+++ b/packages/react/runtime/src/element-template/background/instance.ts
@@ -164,16 +164,27 @@ export class BackgroundElementTemplateInstance {
 
     child.parent = this;
 
-    if (beforeChild) {
-      child.nextSibling = beforeChild;
-      child.previousSibling = beforeChild.previousSibling;
-
-      if (beforeChild.previousSibling) {
-        beforeChild.previousSibling.nextSibling = child;
+    const slotId = child.__slotIndex;
+    // A cross-slot beforeChild cannot be used as anchor: the op stream encodes
+    // (parent, slotId, child, beforeId) and the main thread interprets it as
+    // "insert into slotId before beforeId, else append-tail". We append-tail
+    // both locally and on main thread so `syncMultiSlotChildren` (which
+    // rebuilds `elementSlots[slotId]` by filtering siblings) stays in lock-step
+    // with the main-thread order.
+    const sameSlotAnchor = beforeChild && beforeChild.__slotIndex === slotId
+      ? beforeChild
+      : null;
+
+    if (sameSlotAnchor) {
+      child.nextSibling = sameSlotAnchor;
+      child.previousSibling = sameSlotAnchor.previousSibling;
+
+      if (sameSlotAnchor.previousSibling) {
+        sameSlotAnchor.previousSibling.nextSibling = child;
       } else {
         this.firstChild = child;
       }
-      beforeChild.previousSibling = child;
+      sameSlotAnchor.previousSibling = child;
     } else {
       if (this.lastChild) {
         this.lastChild.nextSibling = child;
@@ -185,7 +196,6 @@ export class BackgroundElementTemplateInstance {
       child.nextSibling = null;
     }
 
-    const slotId = child.__slotIndex;
     syncMultiSlotChildren(this, slotId);
     if (silent) {
       return;
@@ -193,11 +203,7 @@ export class BackgroundElementTemplateInstance {
     if (!this.canEmitPatch()) {
       return;
     }
-    // beforeChild may live in another slot — fall back to no anchor so the
-    // child appends at the slot's tail. Same-slot reference is honored.
-    const beforeId = beforeChild && beforeChild.__slotIndex === slotId
-      ? beforeChild.instanceId
-      : 0;
+    const beforeId = sameSlotAnchor ? sameSlotAnchor.instanceId : 0;
     emitCreateRecursive(child);
     pushOp(
       ElementTemplateUpdateOps.insertNode,

From 1c9d75ca339ae6b75ccdab42d8a557b1151c5bf2 Mon Sep 17 00:00:00 2001
From: Yiming Li <yimingli.cs@gmail.com>
Date: Mon, 18 May 2026 15:38:50 +0800
Subject: [PATCH 09/12] fix(react): clean source slot when ET child moves
 between slots + tighten contract
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Round of follow-ups for Yradex's review on PR #2651:

- `BackgroundElementTemplateInstance.removeChild` now resyncs every
  elementSlots entry that still references the child, not just the slot
  the child currently believes it's in. Preact's `insert()` mutates
  `child.__slotIndex` to the destination before calling our
  `insertBefore`, so the rebind path's `removeChild(child, true)` would
  previously leave a stale reference in the source slot. Added two
  regression tests covering adjacent (0→1) and non-adjacent (0→3)
  cross-slot moves.
- Drop the legacy `children` slot-array fallback in
  `render-to-opcodes.ts` and its accompanying tests. The transform only
  emits `$N` named props now, so the renderer has a single input
  contract.
- Rename `children.iterates-existing-slots` hydrate fixture to
  `children.no-op-when-both-sides-have-empty-slots` to reflect that the
  background side no longer materializes empty slot entries.
- Rename the webpack `background-loader` test and add explicit negative
  assertions for `__etSlot` and the legacy ET internal/external imports.
---
 .../hydrate/background-hydrate/_shared.tsx    |  4 +-
 .../children.iterates-existing-slots/case.tsx |  5 --
 .../case.tsx                                  |  5 ++
 .../output.txt                                |  0
 .../runtime/background/instance.test.ts       | 32 +++++++++++++
 .../render/render-to-opcodes.et.test.jsx      | 46 ++++---------------
 .../element-template/background/instance.ts   | 16 ++++++-
 .../runtime/render/render-to-opcodes.ts       | 11 +----
 .../test/background-loader.test.ts            | 21 +++++----
 9 files changed, 77 insertions(+), 63 deletions(-)
 delete mode 100644 packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/case.tsx
 create mode 100644 packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/case.tsx
 rename packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/{children.iterates-existing-slots => children.no-op-when-both-sides-have-empty-slots}/output.txt (100%)

diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx
index 7475208e3f..c0c7c1b28a 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx
@@ -480,12 +480,14 @@ export function runCaseByName(name: string): unknown {
 }
 
 {
-  defineCase('children.iterates-existing-slots', () => {
+  defineCase('children.no-op-when-both-sides-have-empty-slots', () => {
     backgroundElementTemplateInstanceManager.clear();
     backgroundElementTemplateInstanceManager.nextId = 0;
 
     const rootInstance = new BackgroundElementTemplateInstance('root');
 
+    // serialized side reports two empty slots, background side has none — the
+    // hydrate loop still iterates each empty array but emits nothing.
     const before = createHydrationTemplate(-1, 'root', { elementSlots: [[], []] });
     const stream = hydrateBackground(before, rootInstance);
     return { stream };
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/case.tsx b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/case.tsx
deleted file mode 100644
index 0868d244dc..0000000000
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/case.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { runCaseByName } from '../_shared.js';
-
-export function run() {
-  return runCaseByName('children.iterates-existing-slots');
-}
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/case.tsx b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/case.tsx
new file mode 100644
index 0000000000..a5a0d8a3bc
--- /dev/null
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/case.tsx
@@ -0,0 +1,5 @@
+import { runCaseByName } from '../_shared.js';
+
+export function run() {
+  return runCaseByName('children.no-op-when-both-sides-have-empty-slots');
+}
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/output.txt b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/output.txt
similarity index 100%
rename from packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/output.txt
rename to packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/output.txt
diff --git a/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts b/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
index 9d303a3fe9..6b3e608e6c 100644
--- a/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
+++ b/packages/react/runtime/__test__/element-template/runtime/background/instance.test.ts
@@ -1140,6 +1140,38 @@ describe('Multi-slot inserts and removes without a slot wrapper', () => {
     ]);
   });
 
+  it('clears the source slot when an existing child moves to an adjacent slot', () => {
+    const parent = new BackgroundElementTemplateInstance('view');
+    const child = new BackgroundElementTemplateInstance('text');
+    child.__slotIndex = 0;
+    parent.appendChild(child);
+    expect(parent.elementSlots[0]).toEqual([child]);
+
+    // Preact's `insert()` updates the child's `__slotIndex` to the destination
+    // before re-attaching it via parent.insertBefore.
+    child.__slotIndex = 1;
+    parent.insertBefore(child, null);
+
+    expect(parent.elementSlots[0]).toEqual([]);
+    expect(parent.elementSlots[1]).toEqual([child]);
+  });
+
+  it('clears the source slot when an existing child moves to a non-adjacent slot', () => {
+    const parent = new BackgroundElementTemplateInstance('view');
+    const child = new BackgroundElementTemplateInstance('text');
+    child.__slotIndex = 0;
+    parent.appendChild(child);
+    expect(parent.elementSlots[0]).toEqual([child]);
+
+    child.__slotIndex = 3;
+    parent.insertBefore(child, null);
+
+    expect(parent.elementSlots[0]).toEqual([]);
+    expect(parent.elementSlots[1]).toBeUndefined();
+    expect(parent.elementSlots[2]).toBeUndefined();
+    expect(parent.elementSlots[3]).toEqual([child]);
+  });
+
   it('keeps elementSlots[slotId] in lock-step with append-tail when anchor is cross-slot', () => {
     const parent = new BackgroundElementTemplateInstance('view');
     const slot0Tail = new BackgroundElementTemplateInstance('text');
diff --git a/packages/react/runtime/__test__/element-template/runtime/render/render-to-opcodes.et.test.jsx b/packages/react/runtime/__test__/element-template/runtime/render/render-to-opcodes.et.test.jsx
index 68557096fc..bb3b1858f5 100644
--- a/packages/react/runtime/__test__/element-template/runtime/render/render-to-opcodes.et.test.jsx
+++ b/packages/react/runtime/__test__/element-template/runtime/render/render-to-opcodes.et.test.jsx
@@ -25,40 +25,6 @@ describe('Element Template renderToOpcodes', () => {
     expect(__OpSlot).toBe(4);
   });
 
-  it('should emit slot opcodes for ET host slot arrays', () => {
-    const Template = '_et_test_root';
-    const opcodes = renderToString(
-      <Template children={[null, null, null, 'marker']} />,
-    );
-
-    expect(opcodes[0]).toBe(__OpBegin);
-    expect(opcodes).toContain(__OpSlot);
-    expect(opcodes[opcodes.indexOf(__OpSlot) + 1]).toBe(3);
-    expect(opcodes).toContain(__OpEnd);
-  });
-
-  it('should skip empty slot entries when rendering ET host slot arrays', () => {
-    const Template = '_et_test_root';
-    const opcodes = renderToString(
-      <Template children={[false, 'first', null, true, 'second']} />,
-    );
-
-    const normalized = opcodes.map(item => (typeof item === 'object' ? '<vnode>' : item));
-    expect(normalized).toEqual([
-      __OpBegin,
-      '<vnode>',
-      __OpSlot,
-      1,
-      __OpText,
-      'first',
-      __OpSlot,
-      4,
-      __OpText,
-      'second',
-      __OpEnd,
-    ]);
-  });
-
   it('emits slot opcodes for ET host nodes using $N named props', () => {
     const Template = '_et_test_root';
     const opcodes = renderToString(
@@ -81,10 +47,10 @@ describe('Element Template renderToOpcodes', () => {
     ]);
   });
 
-  it('prefers $N named props over legacy children when both are present', () => {
+  it('skips empty $N slots in ET host nodes', () => {
     const Template = '_et_test_root';
     const opcodes = renderToString(
-      <Template $0='named-zero' children={['legacy-zero']} />,
+      <Template $1='first' $4='second' />,
     );
 
     const normalized = opcodes.map(item => (typeof item === 'object' ? '<vnode>' : item));
@@ -92,9 +58,13 @@ describe('Element Template renderToOpcodes', () => {
       __OpBegin,
       '<vnode>',
       __OpSlot,
-      0,
+      1,
+      __OpText,
+      'first',
+      __OpSlot,
+      4,
       __OpText,
-      'named-zero',
+      'second',
       __OpEnd,
     ]);
   });
diff --git a/packages/react/runtime/src/element-template/background/instance.ts b/packages/react/runtime/src/element-template/background/instance.ts
index f8560e2eb6..374edb9fb0 100644
--- a/packages/react/runtime/src/element-template/background/instance.ts
+++ b/packages/react/runtime/src/element-template/background/instance.ts
@@ -235,8 +235,22 @@ export class BackgroundElementTemplateInstance {
     child.nextSibling = null;
     child.previousSibling = null;
 
+    // A cross-slot move arrives here as Preact's `insert()` mutates
+    // `child.__slotIndex` to the destination before calling our `insertBefore`,
+    // which then triggers this `removeChild(child, true)`. The current
+    // `__slotIndex` therefore points at the new slot while the old slot still
+    // holds a stale reference. Resync every slot map that mentions the child so
+    // the source slot is cleaned up too.
+    const slotsToResync = new Set<number>([child.__slotIndex]);
+    for (let i = 0; i < this.elementSlots.length; i += 1) {
+      if (this.elementSlots[i]?.includes(child)) {
+        slotsToResync.add(i);
+      }
+    }
+    for (const id of slotsToResync) {
+      syncMultiSlotChildren(this, id);
+    }
     const slotId = child.__slotIndex;
-    syncMultiSlotChildren(this, slotId);
     if (silent) {
       return;
     }
diff --git a/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts b/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts
index 12136385c5..44f470f19b 100644
--- a/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts
+++ b/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts
@@ -256,7 +256,6 @@ function renderCompiledEtHostVNode(vnode, props, context, opcodes) {
   // so a missing `$1` between `$0` and `$2` still routes the third entry to
   // slot index 2 on the background side.
   let namedSlotChildren;
-  let hasNamedSlotChildren = false;
   for (const name in props) {
     if (typeof name !== 'string' || name.charCodeAt(0) !== 36 /* '$' */) {
       continue;
@@ -267,18 +266,10 @@ function renderCompiledEtHostVNode(vnode, props, context, opcodes) {
       continue;
     }
     (namedSlotChildren ??= [])[slotId] = props[name];
-    hasNamedSlotChildren = true;
   }
 
-  if (hasNamedSlotChildren) {
+  if (namedSlotChildren !== undefined) {
     renderEtSlotArray(namedSlotChildren, context, vnode, opcodes);
-  } else {
-    // Legacy ET host nodes still encode dynamic element slots in `children`,
-    // so the runtime can interpret the prop as a slot array directly.
-    const elementSlots = props.children;
-    if (elementSlots !== undefined) {
-      renderEtSlotArray(elementSlots, context, vnode, opcodes);
-    }
   }
 
   cleanupVNode(vnode);
diff --git a/packages/webpack/react-webpack-plugin/test/background-loader.test.ts b/packages/webpack/react-webpack-plugin/test/background-loader.test.ts
index 3ea63c997e..f1aa8b8d33 100644
--- a/packages/webpack/react-webpack-plugin/test/background-loader.test.ts
+++ b/packages/webpack/react-webpack-plugin/test/background-loader.test.ts
@@ -57,7 +57,7 @@ function runBackgroundLoader(
 }
 
 describe('background loader', () => {
-  it('uses Preact JSX with the ET runtime package when ET is enabled', async () => {
+  it('routes ET background output through Preact JSX and the multi-slot lowering when ET is enabled', async () => {
     const jsxContent = `
       export function App({ name }) {
         return <view>Hello, {name}</view>;
@@ -69,16 +69,21 @@ describe('background loader', () => {
       experimental_useElementTemplate: true,
     });
 
-    expect(result.code).toContain(
-      '"@lynx-js/react/jsx-runtime"',
-    );
+    // Preact JSX runtime stays on the shared `@lynx-js/react/jsx-runtime`; ET
+    // does not require its own jsx-runtime entry.
+    expect(result.code).toContain('"@lynx-js/react/jsx-runtime"');
     expect(result.code).not.toContain(
       '"@lynx-js/react/element-template/jsx-runtime"',
     );
-    expect(result.code).not.toContain('"@lynx-js/react/internal"');
-    // Multi-slot lowering no longer needs an `__etSlot` runtime call, so the
-    // ET path is now identified by the `_et_` template id prefix rather than
-    // by an `@lynx-js/react/element-template[/internal]` import.
+    // Multi-slot lowering identifies the ET path via `_et_<hash>_` template
+    // ids and no longer needs any `__etSlot` runtime call or ET internal
+    // import, so neither should appear in the compiled output.
     expect(result.code).toMatch(/_et_[a-z0-9]+_/);
+    expect(result.code).not.toContain('__etSlot');
+    expect(result.code).not.toContain('"@lynx-js/react/internal"');
+    expect(result.code).not.toContain(
+      '"@lynx-js/react/element-template/internal"',
+    );
+    expect(result.code).not.toContain('"@lynx-js/react/element-template"');
   });
 });

From ebdef8f9ef7dbe44b43bc904157757b61c409cb0 Mon Sep 17 00:00:00 2001
From: Yiming Li <yimingli.cs@gmail.com>
Date: Mon, 18 May 2026 16:18:54 +0800
Subject: [PATCH 10/12] test(react): restore children.iterates-existing-slots
 and make it meaningful
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The renamed `children.no-op-when-both-sides-have-empty-slots` case
was functionally identical to `children.missing-attrs-element` — both
ran with an empty background instance and a serialized payload that
shipped an empty slot array. Restore the original name and give it the
setup it was always supposed to cover: background side carries a child
at slot 1 while serialized side only reports slot 0, exercising the
`slotCount = Math.max(serializedLen, instanceLen)` branch in
`hydrate.ts` so the background-only slot still emits its child as an
insertion to the main thread.
---
 .../hydrate/background-hydrate/_shared.tsx        | 13 +++++++++----
 .../children.iterates-existing-slots/case.tsx     |  5 +++++
 .../children.iterates-existing-slots/output.txt   | 15 +++++++++++++++
 .../case.tsx                                      |  5 -----
 .../output.txt                                    |  3 ---
 5 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/case.tsx
 create mode 100644 packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/output.txt
 delete mode 100644 packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/case.tsx
 delete mode 100644 packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/output.txt

diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx
index c0c7c1b28a..7e793ab60d 100644
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/_shared.tsx
@@ -480,15 +480,20 @@ export function runCaseByName(name: string): unknown {
 }
 
 {
-  defineCase('children.no-op-when-both-sides-have-empty-slots', () => {
+  defineCase('children.iterates-existing-slots', () => {
     backgroundElementTemplateInstanceManager.clear();
     backgroundElementTemplateInstanceManager.nextId = 0;
 
+    // Background side has children at slot 1 but serialized side only ships
+    // slot 0. `slotCount = Math.max(serialized.length, instance.length)` must
+    // visit slot 1 too so the background-only child gets reported as an
+    // insertion to the main thread.
     const rootInstance = new BackgroundElementTemplateInstance('root');
+    const slot1Child = new BackgroundElementTemplateInstance('child');
+    slot1Child.__slotIndex = 1;
+    rootInstance.appendChild(slot1Child);
 
-    // serialized side reports two empty slots, background side has none — the
-    // hydrate loop still iterates each empty array but emits nothing.
-    const before = createHydrationTemplate(-1, 'root', { elementSlots: [[], []] });
+    const before = createHydrationTemplate(-1, 'root', { elementSlots: [[]] });
     const stream = hydrateBackground(before, rootInstance);
     return { stream };
   });
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/case.tsx b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/case.tsx
new file mode 100644
index 0000000000..0868d244dc
--- /dev/null
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/case.tsx
@@ -0,0 +1,5 @@
+import { runCaseByName } from '../_shared.js';
+
+export function run() {
+  return runCaseByName('children.iterates-existing-slots');
+}
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/output.txt b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/output.txt
new file mode 100644
index 0000000000..63ba1e3a9e
--- /dev/null
+++ b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.iterates-existing-slots/output.txt
@@ -0,0 +1,15 @@
+Object {
+  "stream": Array [
+    1,
+    2,
+    "child",
+    null,
+    Array [],
+    Array [],
+    3,
+    -1,
+    1,
+    2,
+    0,
+  ],
+}
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/case.tsx b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/case.tsx
deleted file mode 100644
index a5a0d8a3bc..0000000000
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/case.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { runCaseByName } from '../_shared.js';
-
-export function run() {
-  return runCaseByName('children.no-op-when-both-sides-have-empty-slots');
-}
diff --git a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/output.txt b/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/output.txt
deleted file mode 100644
index b2f705ad33..0000000000
--- a/packages/react/runtime/__test__/element-template/fixtures/hydrate/background-hydrate/children.no-op-when-both-sides-have-empty-slots/output.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-Object {
-  "stream": Array [],
-}

From 55b44d9f237772d7e75c8b43c479915f30085ca5 Mon Sep 17 00:00:00 2001
From: Yiming Li <yimingli.cs@gmail.com>
Date: Mon, 18 May 2026 16:38:40 +0800
Subject: [PATCH 11/12] refactor(react): simplify ET multi-slot $N collection
 to mirror snapshot path

Match the shape used in `packages/react/runtime/src/snapshot/renderToOpcodes/index.ts`:

```ts
for (const name in props) {
  if (name.startsWith('$')) {
    (namedSlotChildren ??= [])[+name.slice(1)] = props[name];
  }
}
```

The transform only emits `$<int>` props, so the defensive `slotId >= 0`
guard and the `charCodeAt` micro-optimization were never reachable in
practice. Same behavior, less code.
---
 .../runtime/render/render-to-opcodes.ts             | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts b/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts
index 44f470f19b..5c07a37276 100644
--- a/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts
+++ b/packages/react/runtime/src/element-template/runtime/render/render-to-opcodes.ts
@@ -254,18 +254,13 @@ function renderCompiledEtHostVNode(vnode, props, context, opcodes) {
 
   // Multi-slot output emits one prop per slot keyed `$N`. Collect them sparsely
   // so a missing `$1` between `$0` and `$2` still routes the third entry to
-  // slot index 2 on the background side.
+  // slot index 2 on the background side. Mirrors the snapshot path in
+  // `packages/react/runtime/src/snapshot/renderToOpcodes/index.ts`.
   let namedSlotChildren;
   for (const name in props) {
-    if (typeof name !== 'string' || name.charCodeAt(0) !== 36 /* '$' */) {
-      continue;
-    }
-    const slotId = +name.slice(1);
-    /* v8 ignore next 3 -- defensive: transform only emits `$<int>`, so non-numeric slot ids should never reach here. */
-    if (!(slotId >= 0)) {
-      continue;
+    if (name.startsWith('$')) {
+      (namedSlotChildren ??= [])[+name.slice(1)] = props[name];
     }
-    (namedSlotChildren ??= [])[slotId] = props[name];
   }
 
   if (namedSlotChildren !== undefined) {

From 3fb1c6b28d6235c5ed438b5ea59d2a40b203ee4f Mon Sep 17 00:00:00 2001
From: Yiming Li <yimingli.cs@gmail.com>
Date: Mon, 18 May 2026 17:08:15 +0800
Subject: [PATCH 12/12] test(react): add Preact-driven cross-slot move test for
 the removeChild fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per Yradex's suggestion: cover the source-slot cleanup end-to-end through
Preact's diff rather than only at the `insertBefore`/`removeChild` unit
level. A simple two-slot swap doesn't surface the fix because Preact's
`findMatchingIndex` returns the skewedIndex immediately when the old
slot at that position is null, and the `skew==±1` optimization sets the
new `__nextSlotIndex` but skips `insert()` — leaving `__slotIndex` (and
our slot ops) stale. Both are upstream Preact concerns separate from
this PR.

A three-element rotate (`[a, b, c] → [c, a, b]`) shifts `c` by 2
positions, which lands on the `INSERT_VNODE` path and reaches our
runtime through `parentDom.insertBefore`. The new test confirms that:
- `c.__slotIndex` is updated to its new home (slot 0).
- `host.elementSlots[2]` is empty even though Preact only fires the
  rebind via `removeChild(c, silent=true)` — exactly the path the
  source-slot resync was added for.

`a` and `b` stay at their old slot indices because Preact takes the
`skew==±1` shortcut for them; that's outside this fix's scope.
---
 .../runtime/background/render/preact.test.tsx | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/packages/react/runtime/__test__/element-template/runtime/background/render/preact.test.tsx b/packages/react/runtime/__test__/element-template/runtime/background/render/preact.test.tsx
index 4066b9e2ab..0fb97171aa 100644
--- a/packages/react/runtime/__test__/element-template/runtime/background/render/preact.test.tsx
+++ b/packages/react/runtime/__test__/element-template/runtime/background/render/preact.test.tsx
@@ -79,4 +79,51 @@ describe('Background Preact render', () => {
       ).toEqual(next);
     }
   });
+
+  it('updates host.elementSlots when Preact moves a keyed child far enough to trip INSERT_VNODE', () => {
+    // Preact only invokes its `insert()` path (which propagates
+    // `__nextSlotIndex → __slotIndex` and calls `parentDom.insertBefore`)
+    // when `findMatchingIndex` lands at a position more than one off from
+    // `skewedIndex` — i.e. when `INSERT_VNODE` is set. Rotating three
+    // keyed children so the last hops to position 0 (`[a,b,c] → [c,a,b]`)
+    // forces that branch for `c` while leaving `a`/`b` on Preact's
+    // `skew==±1` shortcut (which is a separate upstream concern — see
+    // reply on the review thread). For `c` we should see the source slot
+    // (2) cleaned out and the destination slot (0) updated, exercising
+    // the `removeChild` source-slot resync from the bug fix end-to-end.
+    function Rotate({ order }: { order: readonly [0 | 1 | 2, 0 | 1 | 2, 0 | 1 | 2] }): JSX.Element {
+      const items = [
+        <text key='a'>a</text>,
+        <text key='b'>b</text>,
+        <text key='c'>c</text>,
+      ] as const;
+      return (
+        <view>
+          <view id='top'>{items[order[0]]}</view>
+          <view id='mid'>{items[order[1]]}</view>
+          <view id='bot'>{items[order[2]]}</view>
+        </view>
+      );
+    }
+
+    root.render(<Rotate order={[0, 1, 2]} />);
+    markElementTemplateHydrated();
+
+    const host = __root.firstChild as BackgroundElementTemplateInstance;
+    expect(host.elementSlots[2]?.length).toBe(1);
+    const cNode = host.elementSlots[2]![0]!;
+    expect(cNode.__slotIndex).toBe(2);
+
+    root.render(<Rotate order={[2, 0, 1]} />);
+
+    // After the rotate, `c` is the keyed child that Preact will mark with
+    // `INSERT_VNODE` (matchingIndex 2, skewedIndex 0 → not adjacent). The
+    // bug fix means slot 2's local map clears even though Preact's
+    // `insert()` only invokes `removeChild(c, silent=true)` for the
+    // rebind; the resync iterates the previous slot maps and drops the
+    // stale `c` reference there.
+    expect(host.elementSlots[2] ?? []).toEqual([]);
+    expect(host.elementSlots[0]).toContain(cNode);
+    expect(cNode.__slotIndex).toBe(0);
+  });
 });