This is the Slot without Name for Lionel Messi This is the Slot without Name for Niks DeveloperĮmail: is the Slot without Name for Cristiano Ronaldo Now, take a look at the below Parent Component. Now, let’s check how easy it will be to do with Slots in LWC. Now, if we want to display three Contacts with unique heading style, or if we want to display Contact Information which can be either Website, Phone, or Email, we need to handle this using if conditions with multiple attributes.

componentName: To display the name of Child Component.

It will have the markup (without Slot) that is included inside the Child Component tag in Parent Component. We will pass either Website, Email, or Phone for Contact. contactInfo: It will display Contact Information.We will pass markup to display Name in a unique style. heading: To display the Name of Contact.Here, we have created 4 Slots where the markup will be sent from Parent Component: Take a look at the below Child Component: Hence, ideally, there should be only 1 Unnamed Slot if necessary. And any markup (without Slot attribute) that is included inside the Child Component tag in the Parent Component will be rendered in all the Unnamed Slots in Child Component. If the name is not provided, it is called an Unnamed Slot. We will create a Slots for Name, Contact and Other Information. Child Component will have Contact details like Name, Contact Info, and Other Information.

In this implementation, we will create a Parent and Child Lightning Web Component. Hence, we can use one child component to show it in multiple ways to make it more reusable and dynamic. Once the Slots are created in Child Component, the markup for these Slots can be passed from Parent Component. Usually, Slots in LWC are particularly used in Child Component where we define sections, for example, header, body, and footer. It is also used to create a template in Lightning Web Component where we can create dynamic sections where the markup can be populated dynamically. Slots in LWC are useful to make Lightning Web Component reusable and more flexible. In this post, we will see why and how we should use Slots in LWC (Lightning Web Component).

Lightning web component slots