slotLWC

Slot in LWC (Lightning Web Component)

LWC

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

The concept is similar to Visual Force’s composition. The idea is basically to use a template structure and reuse it in the different components with different data. Slots are part of the Web Component specification, so it’s a W3C standard.
Once the Slots are created in Child Component, the markup for these Slots can be passed from Parent Component. Hence, we can use one child component to show it in multiple ways to make it more reusable and dynamic.
you can visit salesforce link for slot functionality. https://uniquesymbol.com/

As a result there are 2 ways to use it:

Unnamed Slots:-

childDemo.html

<template>
    <h1>Add content to slot</h1>
    <div>
        <slot></slot>
    </div>
</template>

parentDemo.html

<template>
    <c-slot-demo>
        <p>content from parent</p>
    </c-slot-demo>
</template>

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:-

This example component has two named slots and one unnamed slot. In this case, it’s possible to include parameters into the slot.

childDemo.html

<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>

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

parentDemo.html

<template>
    <c-child-demo>
        <span slot="firstName">Mukesh</span>
        <span slot="lastName">Gupta</span>
        <span>Architect</span>
    </c-child-demo>
</template>

The c-parent-demo component passes:

  • Mukesh into the firstName slot
  • Gupta into the lastName slot
  • Architect into the unnamed slot

Here’s the rendered output.

<c-parent-demo>
   <p>
      First Name:
      <slot name="firstName"><span slot="firstName">Mukesh</span></slot>
   </p>
   <p>
      Last Name:
      <slot name="lastName"><span slot="lastName">Gupta</span></slot>
   </p>
   <p>
      Description:
      <slot><span>Architect</span></slot>
   </p>
</c-parent-demo>

Access Elements Passed Via Slots

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

Run Code on slotchange

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

container.html

<template>
    <slot onslotchange={handleSlotChange}></slot>
</template>

container.js

handleSlotChange (e) {
   console.log("New slotted content has been added or removed!");
}

Leave a Reply