Understanding how Radix Primitives merge props onto passed in children

[wencyen]

Hi all, I've been wondering about how radix ui merges the primitive props of Trigger with that of IconButton's <button> element. This is not a question of how to use the interface, but rather where in the source code does this magic exist!? I looked at the implementation of DropdownMenuTrigger here but was unable to find anything about how it is able to merge props onto the children in this case IconButton. Thanks!

import { MoreHoriz as MoreHorizIcon } from '@mui/icons-material'
import { IconButton } from '@mui/material'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { PropsWithChildren, ReactNode } from 'react'
const MenuDemoWithRadix = () => {
  <DropdownMenu.Root>
    <DropdownMenu.Trigger asChild>
      <IconButton aria-label="Toggle menu" size="medium">
        <MoreHorizIcon fontSize="medium" />
      </IconButton>
    </DropdownMenu.Trigger>
    // ... rest of the component
  </DropdownMenu.Root>
}

[joaom00]

Hey @codepath2019, the magic happens in the Slot component and Radix uses it through Primitive helper

[wencyen]

thanks for responding @joaom00 I will look into the source of this magic