Consider two Svelte components: Parent.svelte and Child.svelte. The Parent component includes Child inside its markup. What will be the visible output when Parent is rendered?
<!-- Child.svelte --> <script> export let name = "Guest"; </script> <p>Hello, {name}!</p> <!-- Parent.svelte --> <script> import Child from './Child.svelte'; </script> <div> <h1>Welcome</h1> <Child name="Alice" /> </div>
Think about how props are passed from parent to child components in Svelte.
The Parent component renders a div containing an h1 and the Child component. The Child receives the prop name="Alice" and displays "Hello, Alice!" inside a p tag. So the full output includes both the h1 and the child's p.
Given a parent component that passes a writable store to a child component, what will be the displayed count after clicking the button once?
<!-- Counter.svelte --> <script> import { writable } from 'svelte/store'; export let countStore; </script> <button on:click={() => countStore.update(n => n + 1)}> Increment </button> <p>Count: {$countStore}</p> <!-- App.svelte --> <script> import Counter from './Counter.svelte'; import { writable } from 'svelte/store'; const count = writable(0); </script> <Counter countStore={count} />
Remember how Svelte stores work and how the $ prefix unwraps store values reactively.
The count store starts at 0. Clicking the button calls countStore.update which increments the value by 1. The {$countStore} syntax unwraps the current value reactively, so the displayed count updates to 1.
In Svelte, you want a wrapper component to pass all received props to its child component without listing them individually. Which code snippet achieves this?
<!-- Wrapper.svelte --> <script> import Child from './Child.svelte'; </script> <Child {...$$props} />
Check Svelte's special variable for forwarding all props.
Svelte uses the special variable $$props inside components to represent all props passed to it. Using {...$$props} spreads all these props to the child component. Other options are invalid syntax or undefined variables.
Consider a parent component passing a prop to a child component. The child uses the prop to initialize a local variable but does not update when the prop changes. Why?
<!-- Child.svelte --> <script> export let count; let localCount = count; </script> <p>Local count: {localCount}</p> <!-- Parent.svelte --> <script> import Child from './Child.svelte'; let count = 0; function increment() { count += 1; } </script> <button on:click={increment}>Increment</button> <Child count={count} />
Think about how local variables initialized from props behave in Svelte.
In Svelte, local variables initialized from props do not automatically update when the prop changes. The localCount variable is set once when the component is created. To react to prop changes, you must use reactive statements or bind directly to the prop.
In Svelte, what does the <slot> element do inside a component?
Think about how you pass custom content inside component tags.
The <slot> element in Svelte acts as a placeholder inside a component where any child content passed between the component's opening and closing tags will be rendered. It enables flexible component composition by allowing parents to inject custom markup.