How to inject children?

[xperiandri]

I want to render <azdo-pill>C#</azdo-pill> hence C# must be a child to be rendered inside on the line 3 below

<azdo-pill>
    <div class="bolt-pill flex-row flex-center standard regular">
        <div aria-label="" class="bolt-pill-content text-ellipsis" role="presentation">C#</div>
    </div>
</azdo-pill>

How to achieve that?

[christopherjbaker]

If you are using shadow mode (open or closed, doesn't matter), this is very easy to do with slots. If you only need the one slot, using it like you would use children in React, a simple wrapper component is perfect (the same as I suggested in your Enum question. I find myself using this pattern a lot). If you have more than one or want to set up defaults and overrides, I'd suggest reading more about slots at MDN.

const WebPill: React.FC = ({ ...props }) => {
  return <Pill {...props}><slot /></Pill>
})

In a shadowed web component, <slot /> will automatically render the children of the web-component in this spot. React will never know what they are, it only sees the slot element, but the browser will handle all this for us.

If you are not using shadow mode, there is no clean way to handle this due to the way custom elements work. I have an open PR that examines those elements and turn them into a children prop that React can handle, but there is a major bug that I haven't been able to resolve.