Component composition in Svelte - Step-by-Step Execution

Concept Flow - Component composition

Parent Component

↓

Import Child Component

↓

Use Child in Parent's markup

↓

Render Parent

↓

Child renders inside Parent

↓

User sees combined UI

Component composition means putting smaller components inside bigger ones to build UI step-by-step.

Execution Sample

Svelte

/* Child.svelte */
<script>
  export let message = "";
</script>
<p>{message}</p>

/* Parent.svelte */
<script>
  import Child from './Child.svelte';
</script>
<Child message="Hello from Parent!" />

Parent component imports Child and uses it, passing a message prop to show inside Child.

Execution Table

Step	Action	Component	State Before	State After	Rendered Output
1	Parent starts rendering	Parent	No state	Imports Child	<Child message="Hello from Parent!" />
2	Child receives prop	Child	message=""	message="Hello from Parent!"	<p>Hello from Parent!</p>
3	Child renders inside Parent	Parent + Child	Parent markup with <Child>	Child rendered inside Parent	<p>Hello from Parent!</p> inside Parent
4	Parent finishes rendering	Parent	Child rendered	Full UI ready	User sees: Hello from Parent!

💡 Rendering completes when Parent and all children finish rendering.

Variable Tracker

Variable	Start	After Step 2	Final
message	""	"Hello from Parent!"	"Hello from Parent!"

Key Moments - 2 Insights

Why does the Child component show the message from Parent?

Because Parent passes the message as a prop to Child (see execution_table step 2), Child uses it to render its content.

What happens if Parent does not import Child?

Parent cannot use Child in its markup, so Child won't render (see execution_table step 1). Import is required to compose components.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'message' in Child after step 2?

A undefined

B "Hello from Parent!"

C ""

D "Child message"

💡 Hint

Check the 'State After' column for step 2 in execution_table.

At which step does the Child component finish rendering inside Parent?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for when Child is rendered inside Parent in execution_table.

If Parent does not pass the 'message' prop, what will Child display?

A Empty paragraph

B An error

C "Hello from Parent!"

D Nothing renders

💡 Hint

Refer to variable_tracker and how 'message' changes; default is empty string.

Concept Snapshot

Component composition in Svelte:
- Import child with: import Child from './Child.svelte';
- Use child in parent markup: <Child prop="value" />
- Pass data via props (export let propName)
- Child renders inside Parent's UI
- Builds UI by nesting components

Full Transcript

Component composition in Svelte means building UI by putting smaller components inside bigger ones. The Parent component imports the Child component and uses it in its markup. The Parent passes data to Child using props. Child receives the prop and renders content based on it. The rendering process starts with Parent, then Child renders inside Parent, and finally the full UI is shown to the user. Variables like props change as data flows from Parent to Child. Importing Child is necessary to use it. If no prop is passed, Child shows default or empty content.

Practice

1. What is the main purpose of component composition in Svelte?

easy

A. To write all UI code in one big file

B. To build UI by combining smaller components

C. To avoid using any components

D. To make components run faster

Solution

1. Step 1: Understand component composition

   Component composition means creating a UI by putting smaller components together.

2. Step 2: Compare options

   Only To build UI by combining smaller components correctly describes this purpose. Other options are incorrect or unrelated.

3. Final Answer:

   To build UI by combining smaller components -> Option B

4. Quick Check:

   Component composition = combining components [OK]

Hint: Think: How do you build complex UI simply? [OK]

Common Mistakes:

• Thinking composition means one big file
• Believing components slow down the app
• Ignoring the reuse benefit

2. Which of the following is the correct way to include a child component Child.svelte inside Parent.svelte?

easy

A. <script>import Child from './Child.svelte';</script><Child />

B. <Child /> without import

C. <script>import Child from './Child.svelte';</script><child />

D. <script>import './Child.svelte';</script><Child />

Solution

1. Step 1: Check import syntax

   In Svelte, you must import the component with a name, e.g., import Child from './Child.svelte'.

2. Step 2: Use the imported component tag

   Use <Child /> with capital C matching import name. <script>import Child from './Child.svelte';</script><Child /> matches this exactly.

3. Final Answer:

   <script>import Child from './Child.svelte';</script><Child /> -> Option A

4. Quick Check:

   Import + matching tag = correct syntax [OK]

Hint: Always import before using component tags [OK]

Common Mistakes:

• Using component tags without import
• Using lowercase tag names for imported components
• Importing without naming the component

3. Given these two components, what will be rendered inside App.svelte?

// Child.svelte
<h2>Hello from Child</h2>

// App.svelte
<script>
  import Child from './Child.svelte';
</script>

<main>
  <h1>Welcome</h1>
  <Child />
</main>

medium

A. Hello from Child

B. Welcome

C. WelcomeHello from Child

D. Nothing renders due to error

Solution

1. Step 1: Analyze App.svelte structure

   App renders a main with <h1>Welcome</h1> and includes <Child /> component.

2. Step 2: Check Child.svelte output

   Child renders <h2>Hello from Child</h2>.

3. Step 3: Combine outputs

   App will show <h1>Welcome</h1> followed by Child's <h2>Hello from Child</h2>.

4. Final Answer:

   <h1>Welcome</h1><h2>Hello from Child</h2> -> Option C

5. Quick Check:

   Parent + child render combined [OK]

Hint: Child component content appears where tag is placed [OK]

Common Mistakes:

• Ignoring child component output
• Thinking child replaces parent content
• Assuming syntax error without cause

4. What is wrong with this Svelte component composition code?

// Parent.svelte
<script>
  import Child from './Child.svelte';
</script>

<main>
  <child />
</main>

medium

A. Component tag <child /> should be capitalized as <Child />

B. Missing import statement for Child

C. Parent component cannot use Child component

D. The <main> tag is invalid here

Solution

1. Step 1: Check import and usage

   Child is imported as Child with capital C.

2. Step 2: Check component tag case

   Svelte requires component tags to match import name case exactly. <child /> is lowercase and invalid.

3. Final Answer:

   Component tag <child /> should be capitalized as <Child /> -> Option A

4. Quick Check:

   Component tags are case-sensitive [OK]

Hint: Match component tag case to import name exactly [OK]

Common Mistakes:

• Using lowercase component tags
• Forgetting case sensitivity
• Assuming missing import

5. You want to create a Dashboard.svelte that shows a Header, a Sidebar, and a Content component. Which approach correctly composes these components to keep the layout organized and reusable?

hard

A. <script>import Header from './Header.svelte'; import Sidebar from './Sidebar.svelte'; import Content from './Content.svelte';</script>
<Header />
<Sidebar />

B. <script>import Header from './Header.svelte';</script>
<Header />
<Sidebar />
<Content />

C. <script>import * from './components';</script>
<Header /><Sidebar /><Content />

D. <script>import Header from './Header.svelte'; import Sidebar from './Sidebar.svelte'; import Content from './Content.svelte';</script>
<div class='dashboard'>
<Header />
<Sidebar />
<Content />
</div>

Solution

1. Step 1: Check imports for all components

   <script>import Header from './Header.svelte'; import Sidebar from './Sidebar.svelte'; import Content from './Content.svelte';</script> <div class='dashboard'> <Header /> <Sidebar /> <Content /> </div> imports Header, Sidebar, and Content correctly.

2. Step 2: Check usage inside a container

   <script>import Header from './Header.svelte'; import Sidebar from './Sidebar.svelte'; import Content from './Content.svelte';</script> <div class='dashboard'> <Header /> <Sidebar /> <Content /> </div> uses a container div to organize components, making layout clear and reusable.

3. Step 3: Compare other options

   <script>import Header from './Header.svelte';</script> <Header /> <Sidebar /> <Content /> misses imports for Sidebar and Content. <script>import * from './components';</script> <Header /><Sidebar /><Content /> uses invalid import syntax. <script>import Header from './Header.svelte'; import Sidebar from './Sidebar.svelte'; import Content from './Content.svelte';</script> <Header /> <Sidebar /> misses Content usage.

4. Final Answer:

   <script>import Header from './Header.svelte'; import Sidebar from './Sidebar.svelte'; import Content from './Content.svelte';</script> <div class='dashboard'> <Header /> <Sidebar /> <Content /> </div> -> Option D

5. Quick Check:

   Import all + use all components inside container [OK]

Hint: Import and use all components inside one container [OK]

Common Mistakes:

• Forgetting to import all components
• Using invalid import syntax
• Not including all components in layout