7

In aura components to check if the slot/facet is empty:

<aura:attribute name="footer" type="Aura.Component[]" description="footer components" />

<aura:if isTrue="{! not(empty(v.footer)) }">

  <footer class="slds-modal__footer">
    {! v.footer }
  </footer>

</aura:if>

After some time I came with this solution:
Javascript file:

@track hasFooter = true;

renderedCallback() {
  const footer = this.template.querySelector("slot[name='footer']");
  if (footer && footer.assignedNodes().length === 0) {
    this.hasFooter = false;
  }
}

html file:

<template if:true={hasFooter}>
  <footer class="slds-modal__footer">
    <slot name="footer"></slot>
  </footer>
</template>

We need to initialize the hasFooter with true, because if not, the slot will never be render. So we will never know if we have something.

Anyone know if has a more easier way to check if the slot is not empty? In aura it was so easy.

2
  • Accessing assignedNodes on a <slot> is the canonical way to verify if it has slotted content. That being said I haven't seen yet a lot of use cases where this is needed in Salesforce codebase. Can you detail what is your use case?
    – pmdartus
    Apr 29, 2019 at 6:34
  • 1
    hello @pmdartus, this is mostly used in the development of generic components. For example, if you are developing a custom generic modal, you have the title, the footer and the body. Sometimes we do not use the title, but the title has a wrapper to give the right UI, so you must hide that wrapper if the attribute && slot of title is empty. Apr 29, 2019 at 8:33

2 Answers 2

7

Accessing assignedNodes or assignedElements on a <slot> is the canonical way to verify if it has slotted content.

In the case of modal with a header, for example, the component needs to handle the case where a slotted content is added or removed. Relying on the renderedCallback is not enough in this case since there is no guaranty for it to be invoked when the sotted content changes.

In this case, you should rely on the slotchange event. This event fires when the slot assigned node changes in the next microtask.

You can find an example: https://playground.lwcjs.org/projects/Bt9kHN4V_/2/edit

<template>
    <slot name="title" 
          class={slotTitleClass} 
          onslotchange={handleTitleSlotChange}></slot>
    <slot></slot>
</template>
import { LightningElement, track } from 'lwc';

export default class Child extends LightningElement {
    @track slotTitleClass = '';

    handleTitleSlotChange(evt) {
        const slot = evt.target;
        const hasTitle = slot.assignedElements().length !== 0;

        this.slotTitleClass = hasTitle ? 'with-title' : '';
    }
}
1
  • If a slot only has a textNode then assignedElements will be empty. Also check the slot's innerText. slot.assignedElements().length || slot.innerText
    – JonShipman
    Sep 1, 2022 at 13:33
-2

I don't know whether it's the easiest way but the following code:

<template if:true={hasFooter.value}>

Checks whether hasFooter is null or not. In your javascript controller you can:

  1. Define a new boolean attribute and then check the size of the returned value, if size>0 set the value as true, otherwise false.
  2. Before you set hasFooter in javascript controller, you check what's the size of the object, if the object is empty so don't set anything to your hasFooter attribute which means hasFooter.value=null and then the object is empty.
1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .