Content projection: slots vs props for composition?
understanding of component composition models and when to use templating over data.
slots let parent pass markup (not data) to child, child renders it as-is, vs props pass values; slots excel when parent needs full layout control.
WHY IT EXISTS: Components need to be reusable but flexible. Some variation is data-driven (pass different props). Other variation is structural (parent decides where and what to render). Slots let the parent decide template shape without the child needing to predict all permutations.
THE MENTAL MODEL: A child component defines placeholders (slots) in its template where the parent can inject content. The parent passes markup (VNodes, Angular templates, Svelte markup) into those slots. The child doesn't care what it receives, just where to render it.
HOW IT WORKS: In Vue, a child defines <slot>; a parent wraps content in the child tag and it fills the slot. Angular uses <ng-content>; parent content projects into it. Svelte uses <slot>. All three work similarly. Named slots extend this: a child can have multiple <slot name="header"> and <slot name="footer">; parent uses slot="header" to target them. Scoped slots (Vue, Svelte) let the child pass data back to the parent's slot content, bridging structure and data.
WHEN IT MATTERS: Modal dialogs, card layouts, and list item templates are classic use cases. A Modal child says "I'll handle open/close and backdrop, you provide the title, body, and buttons." The parent passes different markup to Modal, and each use is unique without Modal needing custom props. Trying this with props leads to messy APIs (buttonText, buttonColor, showFooter, footerContent, ...). Slots scale better.
ONE CONCRETE EXAMPLE: A Card component. Without slots, you'd pass title, description, imageUrl, actions as props; the Card hard-codes a layout. With slots: Card defines <slot name="header">, <slot name="body">, <slot name="footer">. Parent can inject different content: maybe header is an image, maybe text. Maybe body is a form, maybe just paragraphs. Footer can be buttons, links, anything. Card's only job is layout (flex, spacing, shadows); the parent drives content completely.
Read the original → angular.dev
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.