Lightning Web Component Slots

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

  1. Unnamed slots
  2. 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.

 

 

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.

use the below slotdemo.js-meta.xml

 

create a parent component to pass the markup into the slots. use the below SFDX command.

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

 

use the below slotwrapper.js-meta.xml 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 . 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.

 

Use the below namedslots.html code. This example component has two named slots and one unnamed slot.

 

Update the soltwrapper.html code as shown below

 

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().