Component composition in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of nested components?

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?

Svelte

<!-- 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>

A <div><h1>Welcome</h1><p>Hello, Alice!</p></div>

B <div><h1>Welcome</h1></div>

C <div><h1>Welcome</h1><p>Hello, Guest!</p></div>

D <p>Hello, Alice!</p>

💡 Hint

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.

❓ state_output

intermediate

How does state update propagate in composed components?

Given a parent component that passes a writable store to a child component, what will be the displayed count after clicking the button once?

Svelte

<!-- 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} />

A Count: 1

B Count: 0

C Count: undefined

D Count: NaN

💡 Hint

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.

📝 Syntax

advanced

Which option correctly forwards all props to a child component?

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?

Svelte

<!-- Wrapper.svelte -->
<script>
  import Child from './Child.svelte';
</script>
<Child {...$$props} />

A <Child {...props} />

B <Child {...$props} />

C <Child {...this.props} />

D <Child {...$$props} />

💡 Hint

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.

🔧 Debug

advanced

Why does this composed component fail to update on prop change?

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?

Svelte

<!-- 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} />

A The parent component does not pass the count prop properly.

B The child component does not export the count prop correctly.

C localCount is only set once on component creation and does not react to prop changes.

D Svelte does not support passing props to child components.

💡 Hint

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.

🧠 Conceptual

expert

What is the role of in Svelte component composition?

In Svelte, what does the <slot> element do inside a component?

A <slot> is a directive to conditionally render parts of the component.

B <slot> defines where child content passed between component tags will be inserted.

C <slot> automatically binds all props from parent to child components.

D <slot> is used to import external CSS styles into the component.

💡 Hint

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.