Architect a headless Toggle with scoped slots

What's really being asked

This question tests your ability to decouple component behavior from its visual representation. Interviewers want to see if you know how to use scoped slots to invert control, letting the parent own the markup while the child owns the state machine. It also surfaces whether you understand the trade-offs between configurable props and true composition.

The full answer

First, the component should render nothing but a single slot element with no wrapper divs or styling. Second, it should expose state and actions through a default scoped slot, for example passing an object containing on, toggle, and perhaps setOn or off. Third, mention that the parent receives this slot scope and decides what to render, whether that is a button, a switch, or a checkbox. Fourth, list the main advantages: the consumer gets full control over markup and CSS, the same logic can power wildly different UIs without forking code, and the component stays lightweight because it ships no presentational opinions. Fifth, note that this pattern works in Vue via scoped slots and in Svelte via slot props.

The mistakes people make

A red flag is suggesting the Toggle accept props like theme, color, or layout to customize its appearance. Another mistake is rendering wrapper elements or hard-coding a button inside the component and exposing only minor CSS variables. Some candidates forget that scoped slots are callbacks that receive data, and instead try to emit events or use provide and inject for this tightly coupled parent-child relationship. Others confuse renderless with higher-order components or mixins, missing that the slot mechanism keeps the API declarative and tree-shakeable.

What usually comes next

The interviewer might ask how you would handle accessibility, such as wiring aria-pressed or keyboard listeners, and where that logic lives. It is best to keep ARIA attributes and keyboard handlers inside the headless component so that every consumer inherits them. They might also ask how to support compound components, like a Toggle that exposes multiple named scoped slots for on and off states. Another follow-up is performance: because the renderless component adds no DOM, there is no extra reflow cost, but you should avoid creating new objects in the slot scope on every render to prevent unnecessary parent re-renders.

A concrete example

In Vue, the Toggle component would have a template containing only slot v-bind="slotProps" where slotProps is an object with on and toggle. The script section holds a data property on and a method toggle that flips it. The parent consumes it like Toggle v-slot="{ on, toggle }" and renders a button with its own classes, deciding whether to show a checkmark or a label based on on. In Svelte, you would use let: directives on the component to achieve the same inversion of control.