Slot / Children Pattern
A hole in a component that the caller fills with whatever they want. In React it is 'children'; in Vue, Svelte, and web components it is a 'slot'.
See it
What it is
The component owns the frame (padding, border, focus handling, animation, accessibility wiring) and the caller owns what goes inside it. Modal, Card, Layout, Tooltip: nearly all of them are a well-behaved box plus a hole. React calls the hole the children prop. Vue, Svelte, Astro, and web components call it a slot and let you name several of them.
Multiple regions is where it earns its keep. Named slots (header, footer, actions), or React's habit of accepting elements as props like icon={<Search />}, give you a Card that never needs another boolean. When the slot needs data the parent is holding, pass a function instead of an element (render props in React, scoped slots in Vue) so the caller can render using internal state.
Gotcha: do not inspect or filter children to enforce structure. Poking at child element types is brittle, breaks the moment someone wraps a child in a fragment or a memo, and falls apart with dynamically mapped lists. Use named slots or a context-sharing compound component instead.
Ask AI for it
Turn this component into a slot-based container: render only the frame (spacing, border, focus handling, animation) and place caller content through children, plus named slots for header, footer, and actions passed as element props. Never inspect or filter child element types. Where a slot needs the component's internal state, accept a render function that receives it. Show two usages: one with just a body, one with all three slots filled.