SolidJS•3y ago

How to have kind of 'named slot' in Solid like Vue?

I know there is 'props.children' But I want to place each children to different location inside component. What should I have to do?

3 Replies

lxsmnsyc•3y ago

<div>
  {props.firstSlot}
  <div>
    {props.secondSlot}
  </div>
</div>

<div>
  {props.firstSlot}
  <div>
    {props.secondSlot}
  </div>
</div>

<Foo firstSlot={<span />} secondSlot={<span />} />

<Foo firstSlot={<span />} secondSlot={<span />} />

musicloverOP•3y ago

Ok, I should add props. what's the type of slot in TS? 'JSXElement' ?

lxsmnsyc•3y ago

yes, JSX.Element to be specific