Slots for content distribution in Vue - Performance & Optimization

Performance: Slots for content distribution

MEDIUM IMPACT

Slots affect how Vue distributes and renders child content inside components, impacting rendering speed and layout stability.

Passing dynamic content into a component using slots

Vue

<MyComponent>
  <template v-slot:default>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.text }}
      </li>
    </ul>
  </template>
</MyComponent>

Wrapping slot content in semantic elements with keys reduces layout shifts and helps Vue optimize re-renders.

📈 Performance GainSingle reflow per update cycle and improved CLS.

Passing dynamic content into a component using slots

Vue

<MyComponent>
  <template v-slot:default>
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </template>
</MyComponent>

Rendering many elements inside a default slot without keys or with complex nested slots causes frequent reflows and layout shifts when data changes.

📉 Performance CostTriggers multiple reflows per item update and can cause CLS due to layout shifts.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Unkeyed dynamic slot content with many elements	High (many nodes)	Multiple reflows per update	High paint cost	[X] Bad
Keyed slot content wrapped in semantic elements	Moderate (structured nodes)	Single reflow per update	Moderate paint cost	[OK] Good

Rendering Pipeline

Slots content is compiled into render functions that Vue merges with the parent component's VDOM. Changes in slot content trigger re-rendering and layout recalculations.

→Virtual DOM Diffing

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage due to DOM changes from slot content updates

Core Web Vital Affected

CLS

Slots affect how Vue distributes and renders child content inside components, impacting rendering speed and layout stability.

Optimization Tips

1Always use stable keys on elements inside slots to minimize re-renders.

2Wrap slot content in semantic elements to reduce layout shifts.

3Avoid deeply nested or complex slot structures that cause multiple reflows.

Performance Quiz - 3 Questions

How do slots affect page performance in Vue?

A Slots increase bundle size significantly.

B They impact layout and rendering when slot content changes.

C They only affect initial page load, not updates.

D Slots prevent any reflows from occurring.

DevTools: Performance

How to check: Record a performance profile while interacting with slot content updates. Look for layout thrashing and long layout times.

What to look for: Multiple layout events and large layout durations indicate inefficient slot rendering.

Practice

1. What is the main purpose of slots in Vue components?

easy

A. To define component data properties

B. To handle component lifecycle events

C. To insert custom content inside a component from its parent

D. To style components with CSS

Solution

1. Step 1: Understand slot usage

   Slots allow a parent component to pass custom content into a child component's template.

2. Step 2: Differentiate from other features

   Slots are not for data, lifecycle, or styling but for content distribution.

3. Final Answer:

   To insert custom content inside a component from its parent -> Option C

4. Quick Check:

   Slots = custom content insertion [OK]

Hint: Slots let parents insert content inside child components [OK]

Common Mistakes:

• Confusing slots with data properties
• Thinking slots handle lifecycle events
• Assuming slots are for styling

2. Which of the following is the correct syntax to define a named slot called header in a Vue component?

easy

A. <template slot="header"></template>

B. <slot name="header"></slot>

C. <slot>header</slot>

D. <named-slot name="header"></named-slot>

Solution

1. Step 1: Recall named slot syntax

   Named slots use <slot name="slotName"></slot> inside the child component.

2. Step 2: Check options for correct syntax

   <slot name="header"></slot> matches the correct Vue syntax for named slots.

3. Final Answer:

   <slot name="header"></slot> -> Option B

4. Quick Check:

   Named slot syntax = <slot name="..."> [OK]

Hint: Named slots use syntax [OK]

Common Mistakes:

• Using which is deprecated
• Writing header which is incorrect
• Inventing tags like

3. Given this parent and child component usage:

<ChildComponent>
  <template #header>Header Content</template>
  Default Content
</ChildComponent>

And the child template:

<div>
  <header><slot name="header">Default Header</slot></header>
  <main><slot>Default Content</slot></main>
</div>

What will be rendered inside the <header> and <main> tags?

medium

A. Header Content inside <header>, Default Content inside <main>

B. Default Header inside <header>, Default Content inside <main>

C. Header Content inside <header>, Default Content inside <main> replaced by nothing

D. Default Header inside <header>, Default Content inside <main> replaced by nothing

Solution

1. Step 1: Identify slot content passed from parent

   The parent provides content for the named slot "header" and default slot content "Default Content".

2. Step 2: Match slots in child template

   The named slot "header" receives "Header Content" overriding default header text. The default slot receives "Default Content" from parent, so default fallback is not used.

3. Final Answer:

   Header Content inside <header>, Default Content inside <main> -> Option A

4. Quick Check:

   Named slot content and default slot content render correctly [OK]

Hint: Named slot content overrides default; default slot uses fallback if empty [OK]

Common Mistakes:

• Assuming default slot content is replaced by nothing
• Confusing named slot fallback with default slot fallback
• Ignoring template #header syntax

4. What is wrong with this child component slot usage?

<div>
  <slot name="footer">Default Footer</slot>
  <slot>Default Content</slot>
</div>

And parent usage:

<ChildComponent>
  <template #foot>Custom Footer</template>
</ChildComponent>

medium

A. The parent uses #foot but child expects slot named "footer"

B. The child has two slots but parent provides content for none

C. The default slot is missing a name attribute

D. Slots cannot have default content inside them

Solution

1. Step 1: Compare slot names between parent and child

   The child expects a named slot "footer" but the parent provides content for "foot" slot, which does not match.

2. Step 2: Understand slot matching behavior

   Because of the name mismatch, the child's "footer" slot will show its default content, and the parent's "foot" slot content is ignored.

3. Final Answer:

   The parent uses #foot but child expects slot named "footer" -> Option A

4. Quick Check:

   Slot names must match exactly [OK]

Hint: Slot names must match exactly between parent and child [OK]

Common Mistakes:

• Assuming default slot must have a name
• Thinking slots cannot have default content
• Ignoring slot name mismatches

5. You want to create a reusable Card component with three slots: header, body, and footer. The body slot should have default text "No content provided" if empty. Which child component template correctly implements this?

hard

A. <div class="card">
<header><slot name="header"></slot></header>
<section><slot name="body">No content provided</slot></section>
<footer><slot name="footer"></slot></footer>
</div>

B. <div class="card">
<header><slot name="header">No header</slot></header>
<section><slot name="body"></slot></section>
<footer><slot name="footer">No footer</slot></footer>
</div>

C. <div class="card">
<header><slot></slot></header>
<section><slot>No content provided</slot></section>
<footer><slot></slot></footer>
</div>

D. <div class="card">
<header><slot name="header">No header</slot></header>
<section><slot name="body">No content provided</slot></section>
<footer><slot name="footer">No footer</slot></footer>
</div>

Solution

1. Step 1: Check slot names and default content

   The question requires three named slots: header, body, footer. The body slot must have default text "No content provided" if empty.

2. Step 2: Evaluate each option

   <div class="card">
     <header><slot name="header">No header</slot></header>
     <section><slot name="body">No content provided</slot></section>
     <footer><slot name="footer">No footer</slot></footer>
   </div>

   correctly names all slots and provides default content for all, including the body slot with "No content provided".

3. Final Answer:

   Option D correctly implements all named slots with proper default content -> Option D

4. Quick Check:

   Named slots with default fallback text =

   <div class="card">
     <header><slot name="header">No header</slot></header>
     <section><slot name="body">No content provided</slot></section>
     <footer><slot name="footer">No footer</slot></footer>
   </div>

   [OK]

Hint: Use named slots with default text inside slot tags [OK]

Common Mistakes:

• Using unnamed slots for multiple areas
• Missing default content for required slots
• Confusing default slot with named slots