CODEWITHSUNDEEP
reactjsweb-componentstenciljs
Emiliano Ilardo
Emiliano Ilardo

Reputation: 85

How to render React childrens from a StencilJS parent?

In the project I work on we are migrating all the UI components to StencilJS so that they are framework agnostic. The problem I'm having is that now I have to migrate a Modal that we used to have in the react app to StencilJS and later on that StencilJS component will be consumed by the React app.

Of course modals have children, because they have content. I know that you can render Children with <slot /> in StencilJS, but what if those children are React Components, since the react app is the one consuming the modal?

something like

<Stencil-js-modal>
  <react-content-a/>
  <other-react-component/>
</Stencil-js-modal>

would that work? In case it wouldn't, then how that kind of integration between react and stencil can be achieved?

Thanks in advance.

Upvotes: 2

Views: 675

Answers (1)

matthewsteele
matthewsteele

Reputation: 1872

Assuming <Stencil-js-modal> uses a <slot> to display its content that should work fine.

You'll want to ensure you're using shadow: true when defining the modal; that way React doesn't try to clobber the internals of the component when rendering it.

Upvotes: 1

Related Questions