🐛 BUG: Can't pass astro template to component as a prop.

[thetarnav]

What version of astro are you using?

1.0.0-beta.72

Are you using an SSR adapter? If so, which one?

doesn't apply

What package manager are you using?

pnpm

What operating system are you using?

Windows 10

Describe the Bug

Astro template can't be passed to an island component property, but it can be passed as children.
This could cause a weird situation where I'm not able to set a certain prop in the .astro files, and I have to create a .tsx wrapper, only to be able to pass jsx to an island.
But such a workaround prevents the ability to granularly set, or not set the client: directives. You can only control the wrapper hydration.

I'm using Solid, but I guess this applies to any framework as it's the compiler issue.

This is probably a known issue, but I'm just curious if this is something that could be fixed in the future.

// Solid component
const Post = props => {
   return (
      <>
         <h1>{props.header}</h1>
         <main>{props.children}</main>
         <footer>{props.footer}</footer>
      </>
   )
}

// Astro component
<Post
   header={<span>this won't work</span>}
   footer={<SomeOtherCompoenent/>}
>
   <p>this works fine</p>
</Post>

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-at2rbu?file=src%2Fpages%2Findex.astro

Participation

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

[natemoo-re]

Thanks for opening an issue! This is an intentional limitation of our compiler, though I'm sure we could provide a better error message here.

Instead of passing elements in as props, you should pass the elements as children and use the slot attribute. For JSX frameworks, each of these slots will be passed in as a prop.

<Post>
  <span slot="header">this is passed as `header`</span>
  <p>this works fine</p>
  <SomeOtherCompoenent slot="footer" />
</Post>

https://stackblitz.com/edit/github-at2rbu-9xff7k?file=src%2Fpages%2Findex.astro

[thetarnav]

Oh nice, I had no idea that slots worked this way.
Thanks for the answer :)

[clarkmcc]

Maybe I need to open a new issue for this, but how can I pass a component to a React component in an Astro template? In other words, I have an Astro component that includes a React component, and I'd like to pass some custom component into that React component, but from within the Astro component. I can't use slots right because the React component is where my custom component is going to be rendered.

[gar1t]

I would not make this behavior intentional, but rather a concede that the parser is incomplete.

Properties are both typed and non-opaque values, whereas slots - unless I'm missing something - provide outlets to pass content through opaquely.

Here's a simple case.

---
interface Props {
  items: HTMLElement[];
}
const { items } = Astro.props;
---
{ items.map(item => <div class="wrapped">{item}</div>) }

To not support this intentionaly is surprising.

[kidonng]

Pardon for necro-bumping, but here's a more detailed explanation from the maintainers, for those interested.