Astro Info

Astro                    v6.0.4
Node                     v24.13.1
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Using Astro.slots.render() with a callback function (same as the <Shout /> pattern described in the docs), components are not always correctly rendered.

With a component like the following:

---
type Props = {
  items: unknown[];
};

const { items, ...attrs } = Astro.props;
---

<ul {...attrs}>
  {
    items.map((item, index, list) => (
      <li set:html={Astro.slots.render("default", [item, index, list])} />
    ))
  }
</ul>

<style>
  ul {
    margin: 0;
    font-size: 0.5rem;
  }
</style>

• Refreshing the page without making any change correctly renders the component.
• When we update the styles (e.g. by removing font-size: 0.5rem;):
  • the HMR is working
  • now, if you refresh the page (ie. using F5 for example), the components are no longer rendered and their source code is displayed as a string instead:

    <div data-astro-cid-q3dazxbc data-astro-source-file="/home/projects/llqipgklzw.github/src/components/item.astro" data-astro-source-loc="7:7">Matthew</div>
    

This also happens in Stackblitz by clicking on the "Refresh" button once a style has been updated.

What's the expected result?

When refreshing the page (using F5), the components should be rendered instead of displaying their source code as a string.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/astro6-dev-server-astro-slots-render?file=src%2Fcomponents%2Flist.astro,src%2Fcomponents%2Fitem.astro,src%2Fpages%2Findex.astro&on=stackblitz

Participation

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