Provide alternative to using the slot attribute for placing children

[sissbruecker]

Currently you need to use the slot attribute inherited from the web component to place a child into a specific location of the container:

<NumberField label="Balance" value="200">
  <div slot="prefix">$</div>
</NumberField>

Using an attribute on the child to determine where it is rendered in the container seems untypical for React, so is the term "slot". It's also uncommon, and potentially confusing, to be able to put multiple children into the same location by putting them on the same hierarchy level and repeating the same value for the slot attribute, usually you would use a wrapper component or fragment to group them explicitly together.

More common approaches are a prop on the container component, or a special wrapper component that tells the container where to put the child. For example for adding a prefix or suffix to an input / text field, this is how other libraries do it:

• MUI TextField - startAdornment / endAdornment props
• Ant Design Input - prefix / suffix props
• Chakra Input - InputLeftAddon / InputRightAddon wrapper components

For the number field above, an alternative could be to use a prop like this:

<NumberField label="Balance" value="200" prefix={<div>$</div>} />

Using props would align with some existing APIs, for example header / footer in Dialog or GridColumn.

This affects a whole bunch of components, the effective list would need to be compiled when going ahead with this.

---

One concern regarding using props is readability, for example an app layout could look very cluttered if you have to dump all your drawer / nav bar contents into a prop of the component:

<AppLayout
  drawer={
    <Scroller className="p-s">
      <SideNav ref={sideNavRef}>
        <SideNavItem path="/dashboard">
          Dashboard
        </SideNavItem>
        ...
      </SideNav>
    </Scroller>
  } />

In cases where a lot of content is expected we could chose to use a wrapper component pattern instead (AppLayoutDrawer). Or keep using props, and advise to extract content into separate variables or components. The latter is probably preferable over having different ways of doing the same thing, and quite common from my experience.

[web-padawan]

See also prefix-text / suffix-text feature request in web components: vaadin/web-components#7052