Idea: Implement "asChild" pattern for complete component override

[jpandersen87]

Example: ArkUI.

It uses a factory to create basic element components that accept an asChild prop and forward ref. When enabled, the component will use the children (expected to be a single root element) directly, merge and pass the ref on, and attach necessary side-effect logic to it instead of the default wrapping element. This allows customizing the element used for the component (ex: section instead of div).

• Link to ArkUI's factory module for reference: https://github.com/chakra-ui/ark/blob/%40ark-ui/react%400.14.0/packages/react/src/factory.tsx
• Link to ArkUI's documentation on asChild: https://ark-ui.com/docs/react/overview/as-child-prop

[jbouder]

Are you suggesting this as a solution for your other discussion here? #75

…or maybe in addition to always allowing children for all applicable components?

[jbouder]

…after reading the asChild docs again, I’m now thinking in addition to, as I’m not sure the first question actually makes sense 😁

[jpandersen87]

It would require the other idea suggestion of allowing children implemented, but is otherwise a separate idea 🙂.

[jbouder]

Gotcha. So i'm not sure I'm seeing a good use case for this, can you provide a good example as to where this might be useful on a heavily USWDS based app?

[jpandersen87]

The one use case for me is being able to make a component render as a more semantically-relevant element than just a div that a component may have been programmed to be rendered as by default.

[jbouder]

So not necessarily against the idea, but still not sure I see enough of a need. If you would like to fork and create a draft PR with a basic implementation and a story or 2, I can definitely provide a quick review.