How do you pass markup from a parent to a child component?

WHAT THIS TESTS: This question probes whether you understand declarative composition versus prop-based configuration. Interviewers want to see that you know how to let parents inject arbitrary markup into a child's layout without coupling the child to specific content. It also checks if you understand lexical render scope, specifically that slot content executes in the parent scope and not the child's.

A GOOD ANSWER COVERS: First, the default slot. In Vue the child places a slot element where parent content should render. In Angular the child uses ng-content. The parent simply nests markup inside the child tag. Second, named slots. In Vue the child gives slot a name attribute and the parent targets it with v-slot:name or the shorthand template v-slot:name. In Svelte the child uses slot name="header" and the parent uses slot="header". In Angular the child uses ng-content select="[header]" and the parent adds a header attribute to the projected element. Third, fallback content. A great candidate mentions that you can put default markup inside the slot outlet in Vue or Svelte so the child renders something if the parent provides nothing. In Angular you typically use conditional logic when no projected content exists. Fourth, scope. Emphasize that expressions inside the projected markup access the parent component's data, not the child's, because the content is compiled in the parent's template.

COMMON WRONG ANSWERS: A major red flag is suggesting you pass HTML strings as props and render them with v-html or innerHTML. This breaks Vue's reactivity, bypasses compilation, and opens XSS holes. Another mistake is claiming slot content can directly access child data without scoped slots or context. Confusing named slots with dynamic component names is also a signal of shallow experience.

LIKELY FOLLOW-UPS: The interviewer may ask about scoped slots or slot props, specifically how a child can pass data back up to the parent's slot template using v-bind on the slot element in Vue, or let directives in Svelte. They might also ask about multi-slot projection in Angular, or how fallthrough attributes interact with slots. Be ready to contrast slots with render props in React.

ONE CONCRETE EXAMPLE: Imagine a Modal component. The child template has a header slot, a default body slot, and a footer slot. In Vue, Modal's template contains slot name="header", slot, and slot name="footer". The parent writes Modal, then template v-slot:header, then Confirm, then closing template, then template v-slot:default, then Are you sure, then closing template, then template v-slot:footer, then button OK, then closing button and template and Modal. This keeps Modal reusable across any confirmation flow without hard-coding text or buttons inside the Modal itself.