Pass Markup into Slots

Add a slot to a component’s HTML file so a parent component can pass markup into the component. A component can have zero or more slots.

A slot (<slot></slot>) is a placeholder for markup that a parent component passes into a component’s body.

This example has an unnamed slot. An unnamed slot uses the <slot> element as a placeholder for any markup that a parent component passes into the body of c-slot-demo.

Here’s the markup for a parent component that uses c-slot-demo.

When c-slot-demo is rendered, the unnamed slot is replaced with the markup passed into the body of c-slot-demo. Here’s the rendered output of c-slot-wrapper.

If a component has more than one unnamed slot, the markup passed into the body of the component is inserted into all the unnamed slots. However, a component usually has zero or one unnamed slot.

This example component has two named slots and one unnamed slot.

You can set a dynamic value for the slot attribute of an HTML element. Here, the <span> element has a slot attribute set to the variable dynamicName.

The dynamic value passed into the slot attribute is coerced to a string. For example, if you pass the number 4 to the attribute, it is converted to the string "4". If you pass in a data type that can’t be converted into a string, such as a Symbol(), a TypeError is thrown.

This change doesn’t impact attributes of <slot> elements. For example, you still must pass a static string into the attribute name for a <slot> element.

Here’s the markup for a parent component that uses c-named-slots.

The c-slots-wrapper component passes:

• Willy into the firstName slot
• Wonka into the lastName slot
• Chocolatier into the unnamed slot

Here’s the rendered output.

The <slot></slot> element is part of a component’s shadow tree. To access elements in its shadow tree, a component calls this.template.querySelector() and this.template.querySelectorAll().

However, the DOM elements that are passed into the slot aren’t part of the component’s shadow tree. To access elements passed via slots, a component calls this.querySelector() and this.querySelectorAll().

This example shows how to pass DOM elements to a child component from the child’s context. Provide the selector name, such as an element, for this.querySelector() and this.querySelectorAll().

In this example, the querySelector accepts the element span.

To render a slot conditionally, nest the slot in a <template> tag with the lwc:if, lwc:else, and/or lwc:elseif directives.

The template compiler treats the conditional directives as a valid use case, and it knows that <slot> isn't rendered twice.

If you use the legacy if:true and if:false directives, the compiler warns you about duplicate slots because it's not clear if <slot> will only render once. For example, the expression getter can have an inconsistent return value each time.

All <slot> elements support the slotchange event. The slotchange event fires when a direct child of a node in a <slot> element changes. For example, this occurs when new content is appended or deleted. Only <slot> elements support this event.

Changes within the children of the <slot> element don’t trigger a slotchange event.

In this example, the <slot> element handles the slotchange event.

The component c-child is passed into the slot.

If the flag addOneMore is set to True, the console prints the first time the component is rendered.

The slotchange event is not triggered even if showFooter is true and the footer element is appended.

See Also

• Shadow DOM
• Handle Events
• Compose Components Using Slots Vs Data
• MDN Web docs: <slot>