Slots

A parent fills a default slot or a named slot. Light DOM changes how those slots and CSS behave.

Default and named slots

A <slot> is a placeholder in the child. Markup the parent places between the child tags lands in the default slot, the one without a name.

A named slot is <slot name="title">Untitled</slot>. The parent marks the matching element with slot="title". The text inside the slot is the fallback when the parent passes nothing. A component usually has one default slot.

Who owns the nodes

Slotted markup stays in the parent's tree. The child reads those nodes with this.querySelector, because they are outside the child's shadow tree. this.template.querySelector sees the slot, and it does not see the slotted content.

You cannot pass an Aura component into a slot.

Light DOM changes slots and CSS

In shadow DOM, parent CSS stops at the boundary. ::slotted and the slotchange event are available because the slot element is really there.

In light DOM, LWC emulates slots. The <slot> element is not rendered, and the slotted nodes are placed on the host. slotchange and ::slotted do not apply. A parent stylesheet can reach the light DOM child, which is why you opted in.

Example

html

<template>
  <section>
    <header><slot name="title">Untitled</slot></header>
    <slot></slot>
  </section>
</template>

• Pass markup into slots
• Light DOM