How you can Use Lightning Net Part (LWC) Slots

Lightning Net Part Slots are a precious software for any Salesforce Developer so as to add to their arsenal. On this weblog, we’ll overview what they’re, what they do, and use them.

What are LWC slots?

A slot ( ) is a placeholder for markup {that a} father or mother part passes right into a part’s physique. Salesforce Developer Information additional explains Slots as follows: “Add a slot to a part’s HTML file so a father or mother part can cross markup into the part. A part can have zero or extra slots.”

The idea behind Slots is actually to make use of a template construction, after which be capable of reuse that construction in numerous elements with totally different knowledge.

What does this imply for builders?

To start with, this offers Builders the flexibility to compose complicated purposes with nested elements, permitting for better modularity and reusability. With that being mentioned, you could be questioning how that is totally different from the sample you in all probability already know – that of a father or mother part which instantiates youngster elements and units their properties (the data-driven method).

There are two main features we have to think about when utilizing slots:

Markup vs properties – The father or mother part passes markup into the slotted part. (The important thing phrase right here is markup.) That is the declarative method.
Complexity – Managing the lifecycle of the elements in a declarative manner utilizing slots is extra complicated when in comparison with that of the data-driven method.

Markup vs Properties

So what does it imply to cross markup to a part by way of slots?

When a part implements slots, the applying utilizing it has the pliability of deciding what data goes into the slots. The part now supplies the final structure which different elements can use based mostly on their very own necessities.

Alternatively, utilizing the @api decorator to reveal public properties and features permit the father or mother part to cross knowledge to the kid part with the intention to talk down the hierarchy. If wanted, the kid then communicates again with the father or mother by dispatching DOM occasions.

In easy phrases: if you wish to cross knowledge from father or mother to youngster use the @api decorator, if you wish to cross markup use slots.

Instance

Let’s go over a Lightning Net Part instance known as “banner” which has three named slots: “icon”, “title” and “message”. These slots signify the principle areas of the part that may be custom-made utilizing markup from a father or mother part.

That is the code:

<template>
   <div class=“slds-box slds-theme_default”>
       <div class=“slds-media”>
           <div class=“slds-media__figure”>
               <slot title = “icon”>
                   <lightning-icon icon-name=“utility:display_text” dimension=“medium”
                   alternative-text=“Banner data”></lightning-icon>
               </slot>
           </div>
           <div class=“slds-media__body”>
               <slot title = “title”>Banner title                  
               </slot>
          </div>
       </div>
       <div class=“slds-var-m-top_small”>
           <slot title = “message”>Banner message</slot>
       </div>
   </div>
</template>

That is what the part appears to be like like in its most elementary type:

This what the consequence appears to be like like:

This can be a easy instance, nonetheless, the result’s extremely customizable and permits the “banner” part for use in a number of purposes that require a excessive diploma of fashion and content material customization.

Complexity

There’s an added layer of complexity every time a declarative method is used and knowledge must be handed from the father or mother to the kid part.

In these situations, the father or mother part is answerable for managing the lifecycle of the content material being handed within the slots. Which means that the father or mother part must know when the kid part registers/unregisters. The method is defined in much more element within the official Salesforce documentation right here.

In distinction, a data-driven method simplifies this course of by advantage of its reactive nature. When knowledge adjustments on the father or mother stage, the kid is reactive and updates as properly.

Conclusions

The primary good thing about utilizing slots is the pliability they supply by way of composition. We have now seen within the earlier examples how a easy part may be custom-made in numerous methods. A knowledge-driven method, nonetheless, is most well-liked for complicated situations the place the father or mother part must deal with the information stream to the kid part.