Using StencilJS components with another StencilJS component

Question

my general question is, how can i use a stencil built component within another stencil component. Not in the PWA toolkit but in another Component.

More specifically the component i want to use is not on npm, but on a private bitbucket repo. In its package.json there is prepare script ("prepare":"stencil build"). i then add the component to the parent component in the package.json with a git link. when i run npm install child-component, it fetches the component from bitbucket and builds it with the prepare script. this is working fine. but how do i add a component to be loaded/rendered?

Not sure I completely understand what you're trying to achieve but maybe this helps: https://medium.com/@ales.genova/stenciljs-in-react-vue-angular-82fded0c738f specifically step 2. — Thomas, Aug 27 '18 at 15:46

score 2 · Accepted Answer · answered Sep 14 '18 at 08:17

To get the imported Component to render you have to do this in your Root Component:

render(){
  [<imported-child-component />, ...];

  return(<the-root-components-html />);
}

After that you can use the imported-child-component anywhere in your app.

Using StencilJS components with another StencilJS component

1 Answers1