fix: detach inline slot nodes before the island hydrates

`captureInlineSlot` collected a slot's server-rendered nodes into an array
but never removed them from the page, so they were still children of the
island root at hydration time. Preact adopted them for whatever the island
rendered around the slot — the slot content got overwritten and the island's
own element dropped as excess.

The fixture now renders `<p>` siblings on both sides of the slot. Same tag
as the slot's content matters: hydration matches children by tag name, so a
`<span>` sibling skips past the slot's `<p>` and the bug stays hidden.

Author: lucacasonato

src/client/slot.ts

@@ -74,7 +74,7 @@ function captureSlotNode(index: number): Node[] {
 
 /**
  * Move the nodes between `<!--fresh-slot:N-->` and `<!--/fresh-slot-->` (their
- * own contiguous siblings) into a fragment, removing the markers. Returns null
+ * own contiguous siblings) out of the page, removing the markers. Returns null
  * if the start marker isn't in the live DOM (the slot wasn't rendered inline).
  */
 function captureInlineSlot(index: number): Node[] | null {
@@ -96,7 +96,11 @@ function captureInlineSlot(index: number): Node[] | null {
       n.remove();
       break;
     }
-    nodes.push(n); // moves `n` out of the live DOM and into the fragment
+    // Detach as we go: the island is about to hydrate against this parent, and
+    // preact would otherwise adopt the slot's still-attached nodes for whatever
+    // the island renders around the slot.
+    nodes.push(n);
+    n.remove();
     n = next;
   }
   start.remove();

tests/e2e/slots.spec.ts

@@ -17,6 +17,26 @@ test.describe("island slots (JSX props)", () => {
     await expect(page.getByTestId("slot-children").getByTestId("children-content")).toBeVisible();
   });
 
+  test("a rendered slot keeps the island's own siblings around it", async ({ page }) => {
+    await page.goto("/slots");
+    await expect(page.getByTestId("slot-host")).toHaveAttribute("data-hydrated", "true");
+
+    // The island renders elements of its own on both sides of the slot, with
+    // the same tag name the slot's content uses. Preact must hydrate those
+    // against its own server-rendered DOM — if the slot's nodes are still
+    // attached at hydration time it adopts one of them instead, overwriting the
+    // slot content and dropping the island's own element as excess.
+    await expect(page.getByTestId("before-slot")).toHaveText("before");
+    await expect(page.getByTestId("after-slot")).toHaveText("after");
+    await expect(page.getByTestId("children-content")).toContainText("hello from a slot");
+
+    // …and in that order, with the slot between them.
+    const order = await page
+      .getByTestId("slot-children")
+      .evaluate((el) => Array.from(el.children, (c) => c.getAttribute("data-testid")));
+    expect(order).toEqual(["before-slot", "children-content", "after-slot"]);
+  });
+
   test("an initially-unrendered slot is grafted from its template when the island renders it", async ({
     page,
   }) => {

tests/fixture/islands/SlotHost.tsx

@@ -14,7 +14,15 @@ export function SlotHost(props: { children?: ComponentChildren; extra?: Componen
   }, []);
   return (
     <div data-testid="slot-host" data-hydrated={hydrated}>
-      <div data-testid="slot-children">{props.children}</div>
+      {/* The slot is rendered with siblings on both sides, and they're `<p>`s —
+          the same tag the slot's own content uses. Hydration matches by tag
+          name, so these have to be matched against the island's own DOM; if the
+          slot's nodes are still in the tree, preact adopts one of them here. */}
+      <div data-testid="slot-children">
+        <p data-testid="before-slot">before</p>
+        {props.children}
+        <p data-testid="after-slot">after</p>
+      </div>
       <button
         id="toggle-extra"
         type="button"