Another implementation of asChild

[teleskop150750]

Implementing asChild via slot seems like a more native and logical option in VueJs philosophy. The slot in Vue combines props.children() and props, which return rendering functions in frameworks like React and Solid.

Positive

• No need for Slot Component anymore.
• Vapor friendly since there is no cloneVNode

Minuses

• Some cost for creating slot
• No root node. Default attribute inheritance no longer works, getting templateRef requires additional work
• Duplicate attributes

Reference Solid demo

Playground

[zernonia]

I think the usage for Slot is still needed, and can't be replaced by Vue native slot. I've written some difference here 😁

Reference Solid demo

This link seems to point to Ark UI's composition, which is similar to what we currently have, perhaps you paste the wrong link 🤔

[teleskop150750]

I think the usage for Slot is still needed, and can't be replaced by Vue native slot. I've written some difference here 😁

Reference Solid demo

This link seems to point to Ark UI's composition, which is similar to what we currently have, perhaps you paste the wrong link 🤔

for Vue, slot.asChild is an anlog of props.asChild in Solid.

therefore, I gave the example of Solid, in which mergeProps occurs manually and is controlled by the user

import { Button } from '@acme/ui-lib'
import { Popover } from '@ark-ui/solid/popover'

export const Basic = () => (
  <Popover.Root>
    <Popover.Trigger asChild={(props) => <Button {...props()} />}>Open</Popover.Trigger>
  </Popover.Root>
)