Component naming conventions in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why should Svelte components start with a capital letter?

In Svelte, why is it important to name components starting with a capital letter?

A Because lowercase names are reserved for CSS classes in Svelte.

B Because lowercase names cause the component to be ignored during compilation.

C Because only capitalized names can use reactive statements inside the component.

D Because Svelte treats capitalized names as components and lowercase as HTML elements.

💡 Hint

Think about how Svelte distinguishes between HTML tags and components.

Svelte uses capitalized names to identify components. If a component name starts with a lowercase letter, Svelte treats it as a regular HTML tag, which can cause errors or unexpected behavior.

📝 Syntax

intermediate

Identify the correctly named Svelte component file

Which of the following file names follows the recommended Svelte component naming conventions?

A UserProfile.svelte

B user_profile.svelte

C userProfile.svelte

D userprofile.svelte

💡 Hint

Component files should start with a capital letter and use PascalCase.

Svelte components should be named using PascalCase starting with a capital letter. This helps with clarity and matches the component naming conventions.

❓ component_behavior

advanced

What happens if you import a Svelte component with a lowercase name?

Consider this code snippet:

import header from './Header.svelte';

<header />

What will be the rendered output in the browser?

Svelte

import header from './Header.svelte';

<header />

A The browser renders the HTML <header> element, ignoring the imported component.

B The Header component renders correctly as expected.

C A runtime error occurs because the component name is lowercase.

D Nothing renders because the component is not recognized.

💡 Hint

Remember how Svelte treats lowercase tags in markup.

Svelte treats lowercase tags as native HTML elements. So <header /> renders the HTML header element, not the imported component named 'header'.

🔧 Debug

advanced

Find the error in this Svelte component import and usage

What error will this Svelte code produce?

import navbar from './Navbar.svelte';

<Navbar />

Svelte

import navbar from './Navbar.svelte';

<Navbar />

A No error; component renders correctly.

B SyntaxError due to incorrect component usage syntax.

C ReferenceError: Navbar is not defined because the import name is lowercase but usage is capitalized.

D TypeError: Cannot render component because of case mismatch.

💡 Hint

Check if the imported name matches the used component name exactly.

JavaScript is case-sensitive. Importing as 'navbar' but using <Navbar /> causes a ReferenceError because 'Navbar' is not defined.

❓ state_output

expert

What is the output of this Svelte component with mixed case naming?

Given the component file named MyButton.svelte with this code:

<script>
  export let label = 'Click';
</script>

<button>{label}</button>

And this usage in another component:

import mybutton from './MyButton.svelte';

<mybutton label="Press" />

What will be displayed on the page?

Svelte

import mybutton from './MyButton.svelte';

<mybutton label="Press" />

A The text 'Press' inside a button rendered by the MyButton component.

B Nothing renders because 'mybutton' is lowercase and treated as an unknown HTML tag.

C The literal text '<mybutton label="Press" />' appears on the page.

D A runtime error occurs due to incorrect component naming.

💡 Hint

Recall how Svelte treats lowercase tags in markup and component imports.

Svelte treats lowercase tags as native HTML elements. Since <mybutton /> is lowercase, it is not recognized as the imported component and renders nothing or an unknown tag.