# LWC1138
Represents a warning for placing slots inside iteration blocks.
Severity: Warning
# Message
Invalid slot ({0}). A slot cannot appear inside of an iterator.
The error message format includes one placeholder: {0} indicates the slot being used (either "default" for unnamed slots or name="slotName" for named slots).
Example diagnostic messages:
LWC1138: Invalid slot (default). A slot cannot appear inside of an iterator.
LWC1138: Invalid slot (name="content"). A slot cannot appear inside of an iterator.
# Problem
LWC1138 is a warning that occurs when you place a standard slot element (<slot>) inside an iteration directive (for:each or iterator:*). Slots are designed for content projection from parent to child components, allowing parent components to inject content into predefined locations. When a slot appears inside an iterator, it creates ambiguity about how content should be distributed across multiple dynamically generated elements, which can lead to unexpected rendering behavior.
# Examples
LWC1138 occurs when standard slots are placed inside iteration blocks created with for:each or iterator:* directives.
# 1. Slots in For:each Iterator
Both default (unnamed) and named slots inside for:each loops trigger this warning. The slot would be duplicated for each iteration, creating multiple identical content projection points or multiple slots with the same name.
# Examples with Warnings
Default slot inside for:each template:
<template>
<template for:each={items} for:item="item">
<div key={item}>
<slot></slot>
</div>
</template>
</template>
Error Message:
LWC1138: Invalid slot (default). A slot cannot appear inside of an iterator.
Named slot inside for:each template:
<template>
<template for:each={items} for:item="item">
<div key={item}>
<slot name="content"></slot>
</div>
</template>
</template>
Error Message:
LWC1138: Invalid slot (name="content"). A slot cannot appear inside of an iterator.
Multiple named slots in for:each:
<template>
<template for:each={products} for:item="product">
<article key={product.id}>
<slot name="header"></slot>
<p>{product.description}</p>
<slot name="footer"></slot>
</article>
</template>
</template>
Error Message:
LWC1138: Invalid slot (name="header"). A slot cannot appear inside of an iterator.Error Message:LWC1138: Invalid slot (name="footer"). A slot cannot appear inside of an iterator.
# Warning Resolution Examples
Move default slot outside the iteration:
<template>
<div>
<slot></slot>
</div>
<template for:each={items} for:item="item">
<div key={item.id}>
<p>{item.name}</p>
</div>
</template>
</template>
Place named slots outside the iterator:
<template>
<div>
<slot name="header"></slot>
</div>
<template for:each={products} for:item="product">
<article key={product.id}>
<p>{product.description}</p>
</article>
</template>
<div>
<slot name="footer"></slot>
</div>
</template>
# 2. Slots in Iterator:* Directive
The iterator:* directive provides enhanced iteration capabilities with access to index and first/last properties. Slots inside iterator:* blocks trigger the same warning as with for:each.
# Examples with Warnings
Default slot inside iterator directive:
<template>
<template iterator:it={items}>
<div key={it.value.id}>
<slot></slot>
</div>
</template>
</template>
Error Message:
LWC1138: Invalid slot (default). A slot cannot appear inside of an iterator.
Named slot with iterator properties:
<template>
<template iterator:item={records}>
<div key={item.value.id}>
<span>Item {item.index}</span>
<slot name="record-content"></slot>
</div>
</template>
</template>
Error Message:
LWC1138: Invalid slot (name="record-content"). A slot cannot appear inside of an iterator.
# Warning Resolution Examples
Move slot outside the iterator block:
<template>
<div>
<slot></slot>
</div>
<template iterator:it={items}>
<div key={it.value.id}>
<p>{it.value.name}</p>
</div>
</template>
</template>
# 3. Slots in Inline For:each
When using for:each directly on an element (inline usage) instead of a <template> wrapper, slots inside that element also trigger this warning.
# Examples with Warnings
Slot inside element with inline for:each:
<template>
<div for:each={items} for:item="item" key={item.id}>
<slot></slot>
</div>
</template>
Error Message:
LWC1138: Invalid slot (default). A slot cannot appear inside of an iterator.
# Warning Resolution Examples
Separate slot from iteration:
<template>
<div>
<slot></slot>
</div>
<div for:each={items} for:item="item" key={item.id}>
<p>{item.name}</p>
</div>
</template>
# 4. Slots in Nested Iterations
When iterations are nested inside other iterations, slots placed within the nested iteration trigger this warning. The slot is considered inside an iterator regardless of nesting depth.
# Examples with Warnings
Slot in nested for:each loops:
<template>
<template for:each={items} for:item="item">
<div key={item.id}>
<template for:each={item.children} for:item="child">
<div key={child.id}>
<slot name="nested"></slot>
</div>
</template>
</div>
</template>
</template>
Error Message:
LWC1138: Invalid slot (name="nested"). A slot cannot appear inside of an iterator.
# Warning Resolution Examples
Move slot outside all iterations:
<template>
<div>
<slot name="nested"></slot>
</div>
<template for:each={items} for:item="item">
<div key={item.id}>
<template for:each={item.children} for:item="child">
<div key={child.id}>
<p>{child.name}</p>
</div>
</template>
</div>
</template>
</template>
# Suggested Fix Steps
# Step 1: Locate the Slot Inside the Iterator
Review the warning message to identify which slot is causing the issue and where it appears in your template. The message will indicate whether it's a default slot or a named slot.
# Step 2: Restructure Your Template
Move the slot outside the iterator block. Slots should exist at a static location in your template, not be duplicated across iterations. Consider these approaches:
- Place slots before or after the iterator - If the slot content doesn't need to be within the iterated elements, move it outside the iteration block
- Redesign component structure - If you need dynamic content within each iteration, consider using properties or attributes instead of slots
- Use separate components - If each iterated element needs custom content, create a separate child component that accepts slots, and render those components in the iteration
For specific code examples, see the Warning Resolution Examples in the Examples section.
# Step 3: Verify the Fix
- Re-compile your template
- Ensure LWC1138 no longer appears
- Test your component to verify that content projection works as expected
- If you have multiple slots in iterators, fix any remaining warnings that appear