[Slot] support slotting onto nested children #3695
Conversation
🦋 Changeset detectedLatest commit: 60c567c The changes in this PR will be included in the next version bump. This PR includes changesets to release 44 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
jjenzz
force-pushed
the
slot-improvements
branch
from
56797c0 to
60c567c
Compare
| <Client.Button {...props} ref={forwardedRef} style={{ display: 'flex', gap: '3rem' }}> | ||
| <Slot.Root> | ||
| <Slot.Slottable child={children}> |
There was a problem hiding this comment.
I added this example because it's important that Slot.Root and its desired Slot.Slottable are on the same client or server boundary. This is perhaps something worth documenting. It isn't specific to nested slottables—it's important if we want to change the element that an existing component slots onto.
| // fine in RSC as it's a React.useCallback under the hood | ||
| const composedRefs = useComposedRefs(forwardedRef, slottableElementRef); |
There was a problem hiding this comment.
This broke in the previous attempts because Slot was changed to a 'use client' boundary. We can compose them without that, and all is well :)
| if (process.env.NODE_ENV === 'development') console.warn(createSlotWarning(ownerName)); | ||
| return children; |
There was a problem hiding this comment.
If it cannot slot, we don't throw anymore... it renders the children as normal with a warning. I wasn't sure what was best here tbh.
Description
This is inspired by #2197 and should resolve #3626, but I've made it backwards compatible and also improved the implementation of
Slotslightly:Slot.SlotClonecompsReact.Children.only()error with a more intuitive warninguseComposedRefschange that was revertedssr-testing