#Stencil integration

1 messages · Page 1 of 1 (latest)

half viper
#

Hi! I just discobered puck and im experimenting with my first components.

But I have a previous buid components on StencilJs. Does anyone has experience integrating StencilJs components into Puck? I need some guidance on it. Thanks in advance!

frank palm
#

Hi! I think overall it should be really straightforward, but depending on your use-case, using slots and iframes could be tricky (Puck preview with the iframes option enabled):

  • Dropzones: while using the editor, you should expect that each Dropzone will render extra containers (div elements) inside the components that make use of it (relevant for slots).
  • Window: Iframes have different window and document owners, so be aware where you define your web-components).

Might be a good idea to use the React wrapper for your Stencil components: https://stenciljs.com/docs/react#adding-the-react-output-target

I'm just sharing my thoughts, so go ahead and experiment yourself.

Do you have any specific questions or problems?

React Integration with Stencil | Stencil

Learn how to wrap your components so that people can use them natively in React

ruby ore
#

Stencil emits web components and you can use web components in React 19 seamlessly.