Component composition in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a child component in Svelte.

Svelte

<script>
  import [1] from './Child.svelte';
</script>

Drag options to blanks, or click blank then click option'

AChild

BchildComponent

CComponentChild

Dchild

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or different names that don't match the component file.

Forgetting to import the component before using it.

In Svelte, you import components by their exact exported name. Here, the child component is named Child.

2fill in blank

medium

Complete the code to use the imported child component inside the parent component's markup.

Svelte

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

<main>
  <[1] />
</main>

Drag options to blanks, or click blank then click option'

AChild

Bchild

CchildComponent

DcomponentChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase tags which Svelte treats as HTML elements.

Mismatching the component name in the markup.

In Svelte, component tags use the imported component's exact name with PascalCase.

3fill in blank

hard

Fix the error in passing a prop named 'title' to the child component.

Svelte

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

<Child [1]="Welcome" />

Drag options to blanks, or click blank then click option'

AtitleProp

BTitle

Ctitle

DpropTitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect casing for prop names.

Passing props with names not declared in the child component.

Props in Svelte are passed using the exact prop name defined in the child component, here title.

4fill in blank

hard

Fill both blanks to create a slot in the child component and use it in the parent component.

Svelte

<!-- Child.svelte -->
<div>
  [1]
</div>

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

<Child>
  [2]
</Child>

Drag options to blanks, or click blank then click option'

A<slot />

B<slot></slot>

C<content />

D<slot-content />

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect slot tags like which don't exist in Svelte.

Not placing content inside the child component tags in the parent.

The child component uses <slot /> to mark where passed content goes. The parent places content inside the child tags.

5fill in blank

hard

Fill all three blanks to pass a prop and use a named slot in the child component.

Svelte

<!-- Child.svelte -->
<script>
  export let [1];
</script>
<h2>{ [2] }</h2>
<div>
  <slot name="footer" />
</div>

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

<Child [3]="Hello">
  <p slot="footer">This is the footer content.</p>
</Child>

Drag options to blanks, or click blank then click option'

Atitle

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching prop names between export and usage.

Not using the correct slot name in the parent content.

The prop title is declared and used in the child. The parent passes title="Hello". The named slot footer is used for extra 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