0

I am looking closely at lit to make a cross-framework component library but to be a viable option I need a way to obtain the result of something like Vue's scoped slots or React render functions so I can share the state saved in lit with the components that the users will code with their favorite framework.

Any idea on how to achieve something like this:

<my-awesome-lit-list>
       <UserReactComponentSingleRow {...stateFromMyAwesomeLitList} />
</my-awesome-lit-list>

Being able to have the lit component handling the logic and only pass the correct props to the child component from another framework would be the holy grail of framework interoperability. In the example the user could provide a custom Row component with his framework of choice. I know this specific syntax is not achievable, but I was wondering if there are alternative patterns to obtain the end result.

ciaoben
  • 3,138
  • 4
  • 27
  • 42
  • Lit... This sounds like you picked the first apple you saw in the supermarket. You have to test **[all of the 58 Lit alternatives](https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/)** to check if they better fit your needs – Danny '365CSI' Engelman Feb 05 '22 at 12:59
  • Not really lit specific but you can just use the `` element to set the different placeholders where content can be set by the component's parent. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots#adding_flexibility_with_slots https://lit.dev/docs/components/shadow-dom/#slots – Alan Dávalos Feb 07 '22 at 04:23

0 Answers0