Let’s discuss here what is the slots in the lightning web component and those will be used to pass the properties from the parent component. A slot in a component’s HTML file is a placeholder for markup that a parent component passes into a component’s body. A component can have zero or more slots. A slot is a placeholder for markup that a parent component passes into a component’s body. Slots are part of the Web Component specification To define a slot in markup, use the <slot>
tag, which has an optional name
attribute. In an Aura component, a facet is a similar concept to a slot. Please refer to this link for facets
We have two types of slots
- Unnamed slots
- Named slots
Unnamed Slots
An unnamed slot is a placeholder for any markup that a parent component passes into the body. For Example, in this component, we have defined the slot and parent component will pass the markup into this component.
1 |
sfdx force:lightning:component:create --type lwc --componentname slotdemo --outputdir force-app\main\default\lwc |
use this slotdemo.html code. This template markup is having the <slot> tag which will be used to pass the content from the parent component.
1 2 3 4 5 6 7 |
<template> <d6> Slot Base </d6> <h1>Add content to slot</h1> <div> <slot></slot> </div> </template> |
use the below slotdemo.js-meta.xml
1 2 3 4 5 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="slotdemo"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> </LightningComponentBundle> |
create a parent component to pass the markup into the slots. use the below SFDX command.
1 |
sfdx force:lightning:component:create --type lwc --componentname slotwrapper --outputdir force-app\main\default\lwc |
Use the below slotwrapper.html code. When c-slot-wrapper 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.
Use this slotwrapper.html code
1 2 3 4 5 6 |
<template> <h6> Slot Wrapper </h6> <c-slotdemo> <p>content from parent</p> </c-slotdemo> </template> |
use the below slotwrapper.js-meta.xml code
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle> |
When c-slot-wrapper
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. This UI pattern is unusual. A component usually has zero or one unnamed slot.
Named Slots
named slots are the slot with the name attribute. create a lightning web component using the below SFDX command.
1 |
sfdx force:lightning:component:create --type lwc --componentname namedslots --outputdir force-app\main\default\lwc |
Use the below namedslots.html code. This example component has two named slots and one unnamed slot.
1 2 3 4 5 6 7 8 |
<template> <p>First Name: <slot name="firstName">Default first name</slot> </p> <p>Last Name: <slot name="lastName">Default last name</slot> </p> <p>Description: <slot>Default description</slot> </p> </template> |
Update the soltwrapper.html code as shown below
1 2 3 4 5 6 7 |
<template> <c-namedslot> <span slot="firstName">Willy</span> <span slot="lastName">Wonka</span> <span>Chocolatier</span> </c-namedslot> </template> |
Push changes and now you can able to see the output as shown below
c-slotswrapper drops:
- “Willy” into the firstName slot
- “Wonka” into the lastName slot
- “Chocolatier” into the unnamed slotHere’s the rendered output.
<p>First Name: <span slot=”firstName”>Willy</span></p>
<p>Last Name: <span slot=”lastName”>Wonka</span></p>
<p>Description: <span>Chocolatier</span></p>
DOM elements that are passed to a component via slots aren’t owned by the component and aren’t in the component’s shadow tree. To access these DOM elements passed in via slots, call this.querySelector()
andthis.querySelectorAll()
. The component doesn’t own these elements, so you don’t use this.template.querySelector()
or this.template.querySelectorAll()
.
The following example shows how to get the DOM elements passed to a child component from the child’s context. Provide the selector name, such as an element, for this.querySelector()
and this.querySelectorAll()
.
1 2 3 4 5 6 7 8 9 10 |
import { LightningElement } from 'lwc'; export default class Namedslot extends LightningElement { renderedCallback() { this.template.querySelector('div'); this.template.querySelector('span'); } } |