Components and slots in Laravel - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Blade component usage?

Given the following Blade component and its usage, what will be the final rendered HTML output?

Laravel

<!-- resources/views/components/alert.blade.php -->
<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>

<!-- Usage in a Blade view -->
<x-alert type="danger">
    <strong>Error!</strong> Something went wrong.
</x-alert>

A

<div class="alert alert-danger">
    <strong>Error!</strong> Something went wrong.
</div>

B

<div class="alert alert-danger">
    {{ $slot }}
</div>

C

<div class="alert alert-danger">
    <strong>Error!</strong> Something went wrong.
</div>

D

<div class="alert alert-success">
    <strong>Error!</strong> Something went wrong.
</div>

💡 Hint

Remember that Blade components render the slot content as HTML inside the component's template.

The component receives the 'type' attribute as 'danger', so the class becomes 'alert-danger'. The slot content is rendered as HTML inside the div, so the strong tag is interpreted correctly.

📝 Syntax

intermediate

Which option correctly defines a Blade component with a named slot?

You want to create a Blade component that accepts a named slot called 'footer'. Which of the following component templates is correct?

A

<div>
    {{ $slot }}
    <div class="footer">
        {{ $footerSlot }}
    </div>
</div>

B

<div>
    {{ $slot }}
    <div class="footer">
        {{ $footer ?? $footerSlot }}
    </div>
</div>

C

<div>
    {{ $slot }}
    <div class="footer">
        {{ $footer ?? '' }}
    </div>
</div>

D

<div>
    {{ $slot }}
    <div class="footer">
        {{ $footer }}
    </div>
</div>

💡 Hint

Named slots are accessed as variables matching the slot name, but they may be null if not provided.

Named slots are passed as variables with the slot name. Using {{ $footer ?? '' }} safely handles the case when the slot is not provided, avoiding errors.

🔧 Debug

advanced

Why does this Blade component fail to render the slot content?

Consider this Blade component and usage: Component (resources/views/components/card.blade.php):

{{ $header }}

{{ $slot }}

Usage: Welcome! This is the card body. The rendered output shows the header div empty. What is the cause?

A The named slot 'header' must be accessed as $headerSlot, not $header.

B The component does not declare the $header variable, so it is always empty.

C The component should use @isset($header) to display the header content.

D The component must use {{ $header ?? '' }} to avoid empty output.

💡 Hint

Check how named slots are passed to Blade components and how variables are made available.

Blade components receive named slots as variables only if the component class or anonymous component declares them. Without declaring $header as a public property or passing it explicitly, the variable is undefined and empty.

❓ state_output

advanced

What is the output of this nested Blade component with slots?

Given these components and usage, what is the final rendered HTML? Component: resources/views/components/layout.blade.php

{{ $header }}

{{ $slot }}

{{ $footer }}

Component: resources/views/components/page.blade.php

Title

Content here.

Footer text

A

<html>
  <body>
    <header><h1>Title</h1></header>
    <main><p>Content here.</p></main>
    <footer><small>Footer text</small></footer>
  </body>
</html>

B

<html>
  <body>
    <header></header>
    <main><p>Content here.</p></main>
    <footer></footer>
  </body>
</html>

C

<html>
  <body>
    <header>{{ $header }}</header>
    <main>{{ $slot }}</main>
    <footer>{{ $footer }}</footer>
  </body>
</html>

D

<html>
  <body>
    <header><h1>Title</h1></header>
    <main></main>
    <footer><small>Footer text</small></footer>
  </body>
</html>

💡 Hint

Remember that named slots are passed as variables and the default slot is the content between the tags.

The component receives the named slots 'header' and 'footer' with their HTML content, and the default slot is the paragraph. All are rendered correctly in their places.

🧠 Conceptual

expert

Which statement about Blade components and slots is TRUE?

Select the correct statement about how Blade components and slots work in Laravel.

A Slots content is always escaped by default, so HTML tags inside slots are shown as plain text unless explicitly marked safe.

B Named slots must be declared as public properties in the component class to be accessible inside the component template.

C Anonymous components cannot use slots; only class-based components support slots in Blade.

D The default slot content is passed as a variable named $slot and can be rendered anywhere inside the component template.

💡 Hint

Think about how Blade handles default slot content and named slots in both anonymous and class components.

The default slot content is always available as the $slot variable inside the component template and can be rendered anywhere. Slots content is NOT escaped by default; it is rendered as HTML. Named slots do not require public properties in anonymous components. Anonymous components fully support slots.

Practice

1. What is the main purpose of using components in Laravel Blade?

easy

A. To define routes for the application

B. To write raw PHP code inside Blade templates

C. To create reusable pieces of UI that can be included in multiple views

D. To connect Laravel with external databases

Solution

1. Step 1: Understand what components do

   Components in Laravel Blade are designed to hold reusable UI parts, like buttons or cards, so you don't repeat code.

2. Step 2: Compare options with component purpose

   Only To create reusable pieces of UI that can be included in multiple views describes reusable UI pieces. Other options describe unrelated tasks.

3. Final Answer:

   To create reusable pieces of UI that can be included in multiple views -> Option C

4. Quick Check:

   Components = reusable UI [OK]

Hint: Components = reusable UI blocks in Blade templates [OK]

Common Mistakes:

• Confusing components with routing or database tasks
• Thinking components are for PHP logic only
• Assuming components are only for styling

2. Which of the following is the correct syntax to pass a slot named header to a Laravel Blade component called card?

easy

A. Title

B. Title

C.

D. Title

Solution

1. Step 1: Recall named slot syntax in Blade

   Named slots use <x-slot name="slotName">...</x-slot> inside the component tags.

2. Step 2: Match syntax with options

   <x-card><x-slot name="header">Title</x-slot></x-card> correctly uses <x-slot name="header">. Others misuse slot attribute or tag.

3. Final Answer:

   <x-card><x-slot name="header">Title</x-slot></x-card> -> Option A

4. Quick Check:

   Named slot syntax = <x-slot name="name"> [OK]

Hint: Use for named slots inside components [OK]

Common Mistakes:

• Using slot attribute instead of tag
• Confusing slot with regular HTML <slot> tag
• Passing slot content as a component attribute

3. Given this Blade component usage:

<x-alert>
  <x-slot name="title">Warning</x-slot>
  This is an alert message.
</x-alert>

And the component template:

<div class="alert">
  <h4>{{ $title }}</h4>
  <p>{{ $slot }}</p>
</div>

What will be the rendered HTML output?

medium

A. WarningThis is an alert message.

B. Warning This is an alert message.

C. titleThis is an alert message.

D. Warning

Solution

1. Step 1: Understand slot and named slot usage

   The $title variable receives content from the named slot title. The default $slot holds the inner content outside named slots.

2. Step 2: Match passed content to template placeholders

   The title slot is "Warning", and the default slot is "This is an alert message." so they fill <h4> and <p> respectively.

3. Final Answer:

   <div class="alert"><h4>Warning</h4><p>This is an alert message.</p></div> -> Option A

4. Quick Check:

   Named slot fills $title, default slot fills $slot [OK]

Hint: Named slots fill variables, default slot fills $slot content [OK]

Common Mistakes:

• Confusing default slot with named slot content
• Expecting named slot content inside $slot variable
• Ignoring that $title is set by named slot

4. Identify the error in this Blade component usage:

<x-modal>
  <x-slot name="footer">Close</x-slot>
  <x-slot>Content here</x-slot>
</x-modal>

What is the problem?

medium

A. Named slots cannot be used inside components

B. The slot name "footer" is reserved and cannot be used

C. Slots must be self-closing tags

D. The unnamed slot is incorrectly declared with <x-slot> instead of using default slot syntax

Solution

1. Step 1: Check unnamed slot syntax

   The default slot content should be placed directly inside the component tags, not wrapped in <x-slot> without a name.

2. Step 2: Understand correct default slot usage

   Using <x-slot> without a name is invalid. Default slot content is just plain content inside the component.

3. Final Answer:

   The unnamed slot is incorrectly declared with <x-slot> instead of using default slot syntax -> Option D

4. Quick Check:

   Default slot = direct content, not tag [OK]

Hint: Default slot is plain content, not wrapped in [OK]

Common Mistakes:

• Wrapping default slot content in without name
• Thinking all slots must be named
• Believing slots must be self-closing

5. You want to create a reusable profile-card component that accepts a header slot for the user's name, a default slot for the bio, and a footer slot for action buttons. Which Blade component template correctly supports these slots?

hard

A.
{{ $slot }}
{{ $header }}
{{ $footer }}

B.
{{ $header }}
{{ $slot }}
{{ $footer }}

C.
{{ $header }}
{{ $footer }}
{{ $slot }}

D.
{{ $footer }}
{{ $slot }}
{{ $header }}

Solution

1. Step 1: Match slots to variables

   The named slots header and footer correspond to $header and $footer. The default slot content is in $slot.

2. Step 2: Verify correct placement in template

   <div class="profile-card"> <header>{{ $header }}</header> <section>{{ $slot }}</section> <footer>{{ $footer }}</footer> </div> places $header in <header>, $slot in <section>, and $footer in <footer>, matching the requirement.

3. Final Answer:

   <div class="profile-card"> <header>{{ $header }}</header> <section>{{ $slot }}</section> <footer>{{ $footer }}</footer> </div> -> Option B

4. Quick Check:

   Named slots = $header/$footer, default slot = $slot [OK]

Hint: Named slots = variables, default slot = $slot in template [OK]

Common Mistakes:

• Mixing up slot variable names and their placement
• Using $slot for named slots
• Placing slots in wrong HTML sections