javascriptnode.jssvelte

Svelte equivalent of React's props.children?

I haven't found this feature anywhere in svelte 3.. I want it to be something like this..

App.svelte

<Error>
   <p>Can't connect to the server!</p>
</Error>`

Error.svelte

<div>{props.children}</div>

I want App.svelte to show:

<div><p>Can't connect to the server!</p></div>

I only know how to do this with React's props.children.

Solution

  • You can use slot. It is a component provided by svelte. You can use it inside your component. Whatever is passed to component will be rendered in place of slot

    Try this in your error.svelte

    <div>
    <slot />
</div>