Passing down children - Uncaught TypeError: child.cloneNode is not a function

[ivoiv]

I'm a bit new to WebComponents and Direflow and I have a question.

I want to have a React component that i use like this <Button>Hello!</Button>

and a web-component that i use like this <some-button>Hello!</some-button>

So I made this component

import React from "react";
import PropTypes from "prop-types";

export default function Button(props: any) {
  return <button>{props.children}</button>;
}

Button.propTypes = {
  children: PropTypes.node,
};

Button.defaultProps = {
  children: "Click me!",
};

But then I get an Uncaught TypeError: child.cloneNode is not a function error because direflow seems to expect children to be a node/array as it tries to .cloneNode() through it even tho Strings are perfectly valid React nodes.

EDIT: I made a one-line modification to WebComponentFactory.js to enable Strings as valid Node types(can submit a PR if interested)

That works but it still ignores the "child" of the <some-button>Hello!</some-button> component and rather expects me to send an attribute called 'children' like <some-button children="Hello!/>.

How do you pass/use children like this in Direflow?

[SimonHoiberg]

Hi @ivoiv Thanks for creating this issue.

Yes, indeed children are expected to be DOM Nodes. With Web Components, we are able to pass children, but we need to use slotted elements. See an example here in our cypress tests.

You can also read more about how slotted elements work here, according to the Web Component standard.

However, I do agree that it would be really cool if one could pass down a child directly, and then have it available on props.children. We had this discussion at an earlier point but decided to go with the official Web Component standard and stick to slotted elements.