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.