Slot.Root basic usage
Slot.Root is the basic component that merges props onto a single child element. It is imported from 'radix-ui' and wraps a single child element to which props are merged.
Radix Primitives · all subjects
slot
12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Creating asChild API with Slot
To create your own asChild API, conditionally render Slot.Root when asChild is true, and your native element (e.g., 'button') when asChild is false. Pass all props to the component regardless of which is rendered.
Slot.Slottable for multiple children
Use Slot.Slottable when your component has multiple children to ensure props are passed to the correct element. Slot.Slottable designates which child should receive the merged props.
Wrapping slotted elements with Slot.Slottable
Slot.Slottable accepts a 'child' prop and a render function. The render function receives the child and can wrap it in additional markup while Slot still merges its props and refs onto the child element.
Event handler merging in Slot
When merging event handlers (props starting with 'on' like onClick), Slot creates a new function where the child handler takes precedence over the slot handler. If either handler relies on event.defaultPrevented, the order matters.
Slot.createSlot for typed slots
Slot.createSlot returns a Slot component scoped to a name you provide for use in error messages. It accepts type arguments to specify the element type the slot renders and the props it accepts, providing consumers with accurate TypeScript types.
Slot.SlotProps type helper
Slot.SlotProps accepts the same type arguments as Slot.createSlot to specify element type and props type for the slot component.
Single child asChild example
To support asChild with a single child, use: const Comp = asChild ? Slot.Root : 'button'; return <Comp {...props} />;
Multiple children asChild example
To support asChild with multiple children, use: const Comp = asChild ? Slot.Root : 'button'; return <Comp {...props}>{leftElement}<Slot.Slottable>{children}</Slot.Slottable>{rightElement}</Comp>;
Slot.Slottable with wrapper function example
To wrap a slotted element while preserving prop merging: <Slot.Slottable child={children}>{(child) => <span className="ButtonInner">{child}</span>}</Slot.Slottable>
Event handler precedence example
When Slot.Root and its child both have onClick handlers, the child handler runs first and can call preventDefault(), which will then affect the Slot.Root handler that checks event.defaultPrevented.
Typed slot creation example
Create a typed slot with: const ButtonSlot = Slot.createSlot<HTMLButtonElement, ButtonProps>('Button.Slot');