<script> tags silently dropped from components passed as slots to `server:defer` components

[jwoyo]

Astro Info

Astro                    v5.17.3
Vite                     v6.4.1
Node                     v25.2.1
System                   macOS (arm64)
Package Manager          pnpm
Output                   server
Adapter                  @astrojs/node (v9.5.4)
Integrations             none

Describe the Bug

When a component containing a <script> tag is passed as a slot to a server:defer component, the script is silently stripped from the server island response. The component's HTML renders correctly, but it has no interactivity.

There are no warnings or errors — the script simply disappears.

Reproduction

Minimal repo: https://stackblitz.com/~/github.com/jwoyo/astro-server-island-bug

Counter.astro — a simple component with a <script>:

<div class="counter">
  <p>Count: <span data-count>0</span></p>
  <button data-increment>Increment</button>
</div>

<script>
  document.querySelectorAll("[data-increment]").forEach((btn) => {
    btn.addEventListener("click", () => {
      const countEl = btn.previousElementSibling?.querySelector("[data-count]");
      if (countEl) {
        countEl.textContent = String(Number(countEl.textContent) + 1);
      }
    });
  });
</script>

DeferredWrapper.astro — a server:defer component:

<div>
  <slot name="content" />
</div>

index.astro:

---
import Counter from "../components/Counter.astro";
import DeferredWrapper from "../components/DeferredWrapper.astro";
---

<!-- ✅ Works: script is included in the page -->
<Counter />

<!-- 🐛 Broken: script is silently dropped from the server island response -->
<DeferredWrapper server:defer>
  <Counter slot="content" />
  <div slot="fallback">Loading...</div>
</DeferredWrapper>

Steps

1. Build and run with @astrojs/node
2. Open the page — the first Counter works, the second does not
3. Inspect the /_server-islands/DeferredWrapper response in DevTools → Network

The response contains the Counter's HTML but no <script> tag:

<div>
  <div class="counter">
    <p>Count: <span data-count>0</span></p>
    <button data-increment>Increment</button>
  </div>
</div>

Expected Behavior

The server island response should include the <script> tags from components rendered within it. The second Counter should be interactive.

Root Cause (unverified)

In server-islands.js, ServerIslandComponent.getIslandContent() serializes slot content like this:

const content = await renderSlotToString(this.result, this.slots[name]);
renderedSlots[name] = content.toString();

renderSlotToString returns a SlotString which holds two things:

• The HTML string (via .toString())
• An .instructions array containing render instructions (scripts, directives, etc.)

Calling .toString() discards the .instructions, so any <script> associated with the slot content is lost before the slot is encrypted and sent to the island endpoint.

Workaround

Using <script is:inline> bypasses the render instruction system — the script is emitted as raw HTML, which survives .toString() serialization and is included in the island response.

What's the expected result?

The server island response should include the <script> tags from components rendered within it. The second Counter should be interactive.

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/jwoyo/astro-server-island-bug

Participation

• I am willing to submit a pull request for this issue.

[jwoyo]

Actually, I don't know what the expected behaviour is here. The <script> is silently dropped during slot serialization, but even if it were included in the island response - what happens when the same component appears both on the page and inside a deferred slot? The script already ran at page load and bound to the existing elements. Re-running it from the island response would double-bind those. Using <script is:inline> works as a workaround since it survives serialization and can scope itself per-instance via document.currentScript.

[FredKSchott]

Thanks for the issue! Lets see what our triage bot says, it should be able to check to see if this matches expected behavior or not.

/triage

[astrobot-houston]

I was able to reproduce this issue. The root cause is in ServerIslandComponent.getIslandContent() in packages/astro/src/runtime/server/render/server-islands.ts. When slot content is serialized for the server island request, renderSlotToString() returns a SlotString containing both the HTML string and an .instructions array (which holds render instructions like <script> tags). The code calls .toString() on this result, which only returns the HTML string and discards the .instructions array entirely. This means any <script> tags from components passed as slots are silently dropped from the encrypted payload sent to the server island endpoint.

I was able to fix this issue. The fix casts the renderSlotToString() result to SlotString, then after calling .toString() to get the HTML, iterates over content.instructions to find any script-type instructions and appends their content to the serialized slot HTML. This ensures script tags survive the encryption round-trip and are included in the server island response. View Suggested Fix (Edit: #15626 had not been merged, so push failed. Read "Full Triage Report" below to understand the fix and instructions on how to re-create).

P4: important. This affects any user who passes components containing <script> tags as slots to server:defer components — a common pattern for adding client-side interactivity. The scripts are silently dropped with no warnings, making it difficult to diagnose. The workaround (<script is:inline>) exists but changes script behavior (no deduplication, no bundling) and is non-obvious.

Full Triage Report

Reproduction

The issue reproduces by passing a component with a <script> tag as a named slot to a server:defer component. The script is silently stripped from the server island response while the HTML renders correctly.

Root Cause

In packages/astro/src/runtime/server/render/server-islands.ts (on main branch), the getIslandContent() method serializes slot content at lines 160-161:

const content = await renderSlotToString(this.result, this.slots[name]);
renderedSlots[name] = content.toString();

renderSlotToString() returns a SlotString (defined in packages/astro/src/runtime/server/render/slot.ts) which extends HTMLString and has two properties:

• The string content (HTML) accessible via .toString()
• An .instructions array containing RenderInstruction objects, including RenderScriptInstruction (type 'script') with id and content fields

Calling .toString() only returns the HTML portion and discards the .instructions array, causing all script render instructions from slotted components to be lost before the slot data is encrypted and sent to the server island endpoint.

Fix

The fix (commit 0053ab8b86) modifies getIslandContent() to:

1. Import and cast the result to SlotString to access the instructions property
2. After getting the HTML via .toString(), iterate over any script instructions and append their content to the serialized HTML
3. This ensures scripts survive the encryption/decryption round-trip through createSlotValueFromString() → unescapeHTML() on the server island endpoint

The modified code:

const content = (await renderSlotToString(
    this.result,
    this.slots[name],
)) as unknown as SlotString;
let slotHtml = content.toString();
if (content.instructions) {
    for (const instruction of content.instructions) {
        if (instruction.type === 'script') {
            slotHtml += instruction.content;
        }
    }
}
renderedSlots[name] = slotHtml;

Workaround

Using <script is:inline> bypasses the render instruction system — the script is emitted as raw HTML which survives .toString() serialization. However, this changes script behavior (no deduplication, no bundling by Vite).

This report was made by an LLM. Mistakes happen, check important info.

[jwoyo]

Well comrade AI has apparently confirmed and triaged this but failed to fix it. I have created an PR that makes sure that <script> tags are delivered in server-island slots.

#15633