Container API: Passing rendered components via renderToString's options parameter does not work as expected. #12166
Description
Astro Info
Astro v5.0.0-beta.4
Node v21.7.3
System Linux (x64)
Package Manager unknown
Output static
Adapter none
Integrations @astrojs/alpinejs
astro-icon
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
While building a component library based on a design system I wanted to display the source code of each individual component. Since Astro 4.9.0, this is possible using the experimental Container API.
This works as expected as long as I do not pass components as slots to renderToString. Trying to display those as text (using set:text) does not render the childrens' HTML correctly. However, when used with set:html instead, I get the correctly displayed childrens' HTML, but lose the parent's.
I am not sure what the expected behaviour is, or if there is some sort of workaround I am not aware of. Right now it looks like that I cannot display component source code with Astro's current Container API.
What's the expected result?
To me, the expected result is the entire parent component with the children as proper HTML, along the lines of:
<!DOCTYPE html><article class="card" data-astro-cid-dohjnao5 data-astro-source-file="/home/projects/qgnirvqgmy.github/src/components/Card.astro" data-astro-source-loc="15:23"> <h1 data-astro-cid-dohjnao5 data-astro-source-file="/home/projects/qgnirvqgmy.github/src/components/Card.astro" data-astro-source-loc="16:7"></h1> <!DOCTYPE html><div class="rich-text" data-astro-source-file="/home/projects/qgnirvqgmy.github/src/components/RichText.astro" data-astro-source-loc="4:24"> <p data-astro-source-file="/home/projects/qgnirvqgmy.github/src/components/RichText.astro" data-astro-source-loc="6:4">Some placeholder text.</p> </div> </article>
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-nswts2?file=src%2Fpages%2Findex.astro