Spread props in Svelte - Step-by-Step Execution

Concept Flow - Spread props

Start with props object

↓

Use {...props} in component

↓

Svelte extracts each key-value

↓

Pass each as individual prop

↓

Component receives props

↓

Render with all props applied

Spread props take an object and pass all its key-value pairs as separate props to a Svelte component.

Execution Sample

Svelte

<script>
  let props = { id: 'btn1', class: 'primary', disabled: true };
</script>
<button {...props}>Click me</button>

This code passes all properties from the props object as attributes to the button element.

Execution Table

Step	Action	Props Object	Spread Result	Rendered Element Attributes
1	Initialize props object	{ id: 'btn1', class: 'primary', disabled: true }	N/A	N/A
2	Use {...props} in button	{ id: 'btn1', class: 'primary', disabled: true }	id='btn1', class='primary', disabled	N/A
3	Svelte applies spread	N/A	N/A	<button id='btn1' class='primary' disabled>Click me</button>
4	Render complete	N/A	N/A	Button with id, class, and disabled attribute

💡 All props from the object are spread as individual attributes on the button element.

Variable Tracker

Variable	Start	After Spread	Final
props	{ id: 'btn1', class: 'primary', disabled: true }	N/A	{ id: 'btn1', class: 'primary', disabled: true }

Key Moments - 2 Insights

Why does the disabled attribute appear without a value in the rendered button?

In HTML, boolean attributes like disabled are rendered without a value when true, as shown in execution_table step 3.

What happens if the props object has keys that are not valid HTML attributes?

Svelte passes them as props to components but native HTML elements ignore unknown attributes, so they won't appear in the DOM.

Visual Quiz - 3 Questions

Look at the execution_table step 2, what attributes are spread onto the button?

A id='btn1', class='primary'

B id='btn1', class='primary', disabled

C class='primary', disabled

D Only id='btn1'

💡 Hint

Check the Spread Result column in step 2 of execution_table.

At which step does the button element get its final attributes applied?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the Rendered Element Attributes column in execution_table.

If the props object did not include 'disabled', how would the rendered button change?

A The button would still be disabled

B The button would have disabled='false'

C The button would not have the disabled attribute

D The button would throw an error

💡 Hint

Refer to variable_tracker and execution_table for how props affect attributes.

Concept Snapshot

Spread props in Svelte:
- Use {...object} to pass all object keys as props
- Each key becomes an attribute or prop
- Boolean true attributes render without value
- Unknown attributes ignored on native elements
- Simplifies passing many props at once

Full Transcript

Spread props in Svelte let you pass all properties from an object as individual props to a component or element. For example, if you have an object with id, class, and disabled keys, using {...props} in a button spreads these keys as attributes. Svelte extracts each key-value pair and applies them to the element. Boolean attributes like disabled appear without a value in HTML. This method simplifies passing many props without listing each one. If the object has keys not valid for HTML, native elements ignore them but components can still receive them as props.

Practice

1. What does the spread props syntax {...props} do in a Svelte component?

easy

A. It passes all properties from the props object as individual props to the component.

B. It creates a new component with the name props.

C. It merges two components into one.

D. It removes all props from the component.

Solution

1. Step 1: Understand spread props syntax

   The syntax {...props} takes all key-value pairs from the props object.

2. Step 2: Apply spread props in component

   These key-value pairs are passed as individual props to the component, making them accessible inside.

3. Final Answer:

   It passes all properties from the props object as individual props to the component. -> Option A

4. Quick Check:

   Spread props = pass all object keys as props [OK]

Hint: Spread props pass all object keys as separate props [OK]

Common Mistakes:

• Thinking spread props create a new component
• Confusing spread props with merging components
• Believing spread props remove props

2. Which of the following is the correct self-closing syntax to pass all properties of an object user as props to a Svelte component <Profile />?

easy

A. <Profile {...user}>

B. <Profile {...user} />

C. <Profile {...user};>

D. <Profile {...user}() />

Solution

1. Step 1: Recall spread props syntax in Svelte

   Spread props use {...object} inside the component tag to pass all object keys as props.

2. Step 2: Check correct self-closing tag syntax

   In Svelte, self-closing tags use /> without extra characters or parentheses.

3. Final Answer:

   <Profile {...user} /> -> Option B

4. Quick Check:

   Correct spread syntax + self-closing tag = <Profile {...user} /> [OK]

Hint: Use {...object} inside component tag without extra symbols [OK]

Common Mistakes:

• Adding semicolons inside spread syntax
• Using parentheses after spread props
• Incorrectly closing the component tag

3. Given the code:

  <script>
    let data = {name: 'Alice', age: 30};
  </script>

  <UserCard {...data} age={25} />

What will be the value of age inside UserCard?

medium

A. 30

B. undefined

C. 25

D. Error: Duplicate props

Solution

1. Step 1: Understand spread props and explicit props order

   The spread {...data} passes name: 'Alice' and age: 30 first.

2. Step 2: Recognize explicit prop override

   The explicit prop age={25} comes after spread and overrides the previous age value.

3. Final Answer:

   25 -> Option C

4. Quick Check:

   Explicit props override spread props [OK]

Hint: Explicit props after spread override earlier values [OK]

Common Mistakes:

• Assuming spread props always override explicit props
• Thinking duplicate props cause errors
• Ignoring prop order in component tag

4. Identify the error in this Svelte component usage:

  <script>
    let props = {title: 'Hello'};
  </script>

  <Card {...props} title />

medium

A. Spread props cannot be used with explicit props.

B. The component tag must not be self-closing.

C. The object props must be declared inside the component.

D. Explicit prop title without a value sets it to true.

Solution

1. Step 1: Check explicit prop syntax

   The explicit prop title without a value is treated as title={true} in Svelte.

2. Step 2: Understand Svelte prop override

   This overrides the spread title='Hello' to true.

3. Final Answer:

   Explicit prop title without value sets it to true. -> Option D

4. Quick Check:

   Explicit props need values unless boolean [OK]

Hint: Explicit props must have values unless boolean attributes [OK]

Common Mistakes:

• Thinking spread and explicit props can't be combined
• Assuming missing value is allowed for any prop
• Believing self-closing tags are invalid here

5. You have a Svelte component <Button /> that accepts props type, disabled, and label. You want to pass an object btnProps with {type: 'submit', disabled: false} but override disabled to true and add label as 'Send'. Which is the correct usage?

hard

A. <Button {...btnProps} disabled={true} label='Send' />

B. <Button disabled={true} label='Send' {...btnProps} />

C. <Button label='Send' disabled={true} {...btnProps} />

D. <Button {...btnProps} label='Send'; disabled={true} />

Solution

1. Step 1: Pass base props with spread first

   Use {...btnProps} to pass type and disabled: false.

2. Step 2: Override disabled and add label explicitly

   Explicit props after spread override previous values, so disabled={true} and label='Send' must come after.

3. Step 3: Check order of props

   Only <Button {...btnProps} disabled={true} label='Send' /> places spread first, then explicit props, ensuring correct override.

4. Final Answer:

   <Button {...btnProps} disabled={true} label='Send' /> -> Option A

5. Quick Check:

   Spread first, explicit override after [OK]

Hint: Put spread props first, explicit props after to override [OK]

Common Mistakes:

• Placing explicit props before spread, losing override effect
• Duplicating props in wrong order
• Forgetting to add new props explicitly