Development questions

What are slots in LWC and what is the difference between default and named slots?

DevelopmentEasy

Slots let a parent pass markup into a child's template, making components reusable containers.

Child:

html
<template>
  <header><slot name="header"></slot></header>
  <slot></slot>
</template>

Parent:

html
<c-card>
  <span slot="header">Title</span>
  <p>Default slot content</p>
</c-card>
  • Default (unnamed) slot receives all content without a slot attribute.
  • Named slot receives content with a matching slot="name".

LWC supports slots but not scoped slots.

lwcslotstemplates