Issue with rendering HTML component as a Astro component's child. [email protected] | @astrojs/[email protected]

[milovanovicd]

Astro Info

Astro                    v4.9.1
Node                     v18.18.2
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/sitemap
                         @astrojs/react
                         astro-icon
                         astro-expressive-code
                         @astrojs/mdx

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

No response

Describe the Bug

After upgrading from [email protected] to [email protected] and @astrojs/[email protected] to @astrojs/[email protected] one functionality stopped working. So I have a index.mdx file that has an Astro component that has a default slot and I'm passing a HTML component as its child (import Example from './_example.html'), and the HTML is not getting rendered. Any help?

example index.mdx file.

import Card from '../components/Card.astro';
import CardContent from './_card-content.html';

## Home page

This is getting rendered properly

<CardContent />

This is not getting rendered properly

<Card>
  <CardContent />
</Card>

What's the expected result?

it's expected to render content properly inside the Astro component

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-6gkz5p?file=src%2Fpages%2Findex.mdx

Participation

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

[ArmandPhilippot]

You have to add a <slot /> in your Card.astro component:

<li class="link-card">
    <slot />
</li>

[milovanovicd]

You have to add a <slot /> in your Card.astro component:

<li class="link-card">
    <slot />
</li>

Yeah, sorry I missed that in my example in Stackblitz, and thank you for your response. But I'm still having an issue with my app. I have a default slot and a few named slots, I'm not sure what can cause the issue.

[milovanovicd]

When I added double <slot /> it worked... Can anyone explain what just happened?

[ArmandPhilippot]

@milovanovicd Can you provide a code sample so we can better understand what you mean by a double <slot />?

In your Stackblitz, it's not a double slot: you just opened then closed the slot using <slot></slot>. Since it also works with a single auto-closing <slot />, I guess you are referring to another code...

[milovanovicd]

@ArmandPhilippot sorry, I can't share that part of the code with you, just was wondering if anybody else had an issue with that