How to use "children" of a custom component in solid-elements?

[onx2]

I can't figure out how to pass along the children from the consumer into my custom component. Does anyone know how to do this?

consumer:

<wb-button variant="asdf">button</wb-button>

my custom element:

customElement(
  "wb-button",
  { variant: "one" },
  (props: WbButtonProps, { element }) => {
    return <button>{element.children}</button>;
  }
);

what I end up with:

[onx2]

I think I figured this out though I don't find it very ergonomic so if anyone has a better approach, I would love to hear it.

customElement(
  "wb-button",
  { variant: "one" },
  (props: WbButtonProps, { element }) => {
    return (
      <button>
        <style>{style}</style>
        <For each={element.childNodes}>{(child) => child}</For>
      </button>
    );
  }
);

<wb-button variant="asdf">
        <span>button</span>
        asdf
</wb-button>

[akirchhoff-modular]

I think the expected way to do this is to use a slot element, e.g.:

customElement(
  "wb-button",
  { variant: "one" },
  (props: WbButtonProps) => {
    return <button><slot /></button>;
  }
);

This works for me, but moreover, it works when Solid context providers are in use, while Solid context providers do not work with the <For each={element.childNodes}> approach. I found this solution from the example on #785.