[labs/react] Support adding children to multiple slots

Description

Currently, the react wrapper supports adding children to a default slot.

In order to support multiple slots from react -> lit wrapper, the react dev might have to wrap their components in an html element as an attribute.

() => (
  <div slot="slotA">
    <MyReactComponent />
  </div>
  <div slot="slotB">
    <MyReactComponent />
  </div>
  </div slot="slotC">
    <MyReactComponent />
  </div>
)

It’d be nice to support multiple slots in a shallow manner with react

export const MyElementComponent = createComponent(
  React,
  'my-element',
  MyElement,
  {
    onChange: 'input',
  },
  {
    propName: 'slot_name',
    icons: 'icons',
    suffix: 'suffix',
  }
);

However, rendering might be an issue between react and lit. The major hurdle is setting the slot attribute on an html element rendered in react.

Acceptance criteria

1. Decide if this is a feature the labs react wrapper should support

2. If we go forward, we need to agree on how to extend our API

3. Provably use slotted react components in multiple web component slots

[bugwheels94]

oh nice! display: contents will work with primitives, document fragments </> etc and is just better. I use a custom implementation of createReactComponent and I will try contents as I dont need to IE11.

[justinfagnani]

Setting the style to display: contents will keep the wrapper from interfering with styles.