Component composition in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is component composition in Svelte?

Component composition means building complex UI by combining smaller, reusable components inside each other.

beginner

How do you include one Svelte component inside another?

You import the child component and then use its tag inside the parent component's markup.

beginner

What is the benefit of using component composition?

It helps keep code organized, reusable, and easier to maintain by breaking UI into smaller parts.

intermediate

How can you pass data from a parent to a child component in Svelte?

Use props by adding attributes to the child component tag and declare export let variables in the child.

intermediate

What is a slot in Svelte component composition?

A slot is a placeholder inside a component where you can insert custom content from the parent component.

How do you use a child component inside a parent component in Svelte?

A Use a special Svelte function to call the child

B Write the child's code directly inside the parent

C Import the child and use its tag in the parent's markup

D You cannot use components inside other components

In Svelte, you import the child component and then use its tag inside the parent's markup to compose components.

What keyword do you use in a child Svelte component to receive data from its parent?

A export let

B import

C props

D receive

You declare export let variables in the child component to receive data passed as props from the parent.

What is the purpose of a slot in Svelte?

A To insert custom content from the parent into the child component

B To style components

C To import external libraries

D To handle events

Slots let you place custom content inside a child component from the parent, making components more flexible.

Why is component composition useful?

A It makes code run faster

B It breaks UI into smaller reusable parts

C It removes the need for CSS

D It automatically fixes bugs

Component composition helps organize UI into smaller, reusable pieces, making code easier to manage.

Which of these is NOT a correct way to pass data to a child component in Svelte?

A Using attributes on the child component tag

B Passing data via slots

C Using <code>export let</code> in the child

D Using global variables without props

Using global variables without props is not recommended; data should be passed explicitly via props or slots.

Explain how component composition works in Svelte and why it is helpful.

Think about how small parts build a bigger UI.

Describe how to pass data from a parent to a child component and how to insert custom content inside a child component in Svelte.

Focus on props and slots.