How can i provide a "render"-function to other frameworks like react or angular


Currently iam working on a stencil tree component library and i am facing a problem and iam not sure how to solve it in the best way.

My tree component (stencil) should provide a render function.

  scoped: true
class ... {
  @Prop() renderTreeNode: (data: any) => Element;

Inside of “stencil” a can call the renderTreeNode like the following and it works great!

<my-tree renderTreeNode={(data) =>  <span>{}</span>} data={[...]} />

The tree interate over data and call for each entry the renderTreeNode function. The result of the function (Element) is appended to the component.

// Note: Not the real code the real code have some
// additional virtualization (
data.forEach(entry => {
 const elm = renderTreeNode(entry);

But iam struggeling how i can integrate it into different frameworks?

e.g In React with autogenerated react proxie components (GitHub - ionic-team/stencil-ds-output-targets: These are output targets that can be added to Stencil for React and Angular.)

<MyTree renderTreeNode={(data) => <AReactNode name={} />}

:zap: Not working

<MyTree renderTreeNode={(data) => {
   const el = document.createElement('DIV');
   ReactDOM.render(<AReactNode name={} />, el);
   return el;

:zap: Working, BUT you lose the complete React Context (React.createContext, Redux, etc).

Any ideas how to solve the problem or is there a better solution to render elements dynamicly over a function from different frameworks.