Hi all,

I try to start building a lwc based on this lightning design system: https://www.lightningdesignsystem.com/components/page-headers/#Record-Home

The result of the lwc (PageHeaderRecordHome) looks like the following and contains slots to dynamically pass into buttons in the actions area:

<template>
    <div class="slds-page-header slds-page-header_record-home">
        <div class="slds-page-header__row">
            <div class="slds-page-header__col-title">
                <div class="slds-media">
                    <div class="slds-media__figure">
                        <span class="slds-icon_container">
                            <slot name="icon"></slot>
                        </span>
                    </div>
                    <div class="slds-media__body">
                        <div class="slds-page-header__name">
                            <div class="slds-page-header__name-title">
                                <h1>
                                    <slot name="objectLabelSingular"></slot>
                                    <slot name="recordName" class="slds-page-header__title slds-truncate"></slot>
                                </h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slds-page-header__col-actions">
                <div class="slds-page-header__controls">
                    <div class="slds-page-header__control">
                        Number of assigned slot elements: {numberOfSlotElementInPageHeaderActions}
                        <slot
                            name="pageHeaderActions"
                            onslotchange={handlePageHeaderActionsChange}
                        ></slot>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <slot name="subheader"></slot>
        </div>
    </div>
</template>

JS:

import { LightningElement, track } from 'lwc';

export default class PageHeaderRecordHome extends LightningElement {

    @track numberOfSlotElementInPageHeaderActions = 0;
    @track showIt = false;

    renderedCallback(){
        console.log('>>>renderedCallback.');

        
        const test = this.template.querySelectorAll('lightning-button');
        console.log('>>>test:' + JSON.stringify(test.length, 'null', '\t'));
    }

    handlePageHeaderActionsChange(event) {
        console.log('>>>handlePageHeaderActionsChange.');
        const slot = event.target;
        //const hasTitle = slot.assignedElements().length !== 0;
        this.showIt = true;
        /*
        const test = this.template.querySelectorAll('lightning-button');
        console.log('>>>test:' + JSON.stringify(test.length, 'null', '\t'));

        this.numberOfSlotElementInPageHeaderActions = slot.assignedElements().length;
        console.log('>>>slot:' + JSON.stringify(slot, 'null', '\t'));
        console.log('>>>slot.assignedElements():' + JSON.stringify(slot.assignedElements(), 'null', '\t'));
        console.log('>>>slot.assignedNodes():' + JSON.stringify(slot.assignedNodes(), 'null', '\t'));*/
        //this.slotTitleClass = hasTitle ? 'with-title' : '';
    }
}

Unfortunately it contains crappy code. But that's the result from my different tests.

Now I have a parent component (GetAndSearchAllBanks) which consumes this lwc and that looks like the following:

<template>
    <c-page-header-record-home>
        <div slot="objectLabelSingular">Description</div>
        <div slot="pageHeaderActions">
            <lightning-button label="Ok"></lightning-button>
            <lightning-button label="Ok2"></lightning-button>
        </div>
    </c-page-header-record-home>
</template>

Now my main question:
Is it possible (in PageHeaderRecordHome) to only show the buttons if the parent lwc (GetAndSearchAllBanks) implement the slot?
I want to make the child component (PageHeaderRecordHome) to render only this parts who are required and avoid to show divs which are not needed in some usecases.

I found the following: https://salesforce.stackexchange.com/questions/260305/lwc-check-if-slot-is-empty, but I think I implement it wrong or it doesn't work this way.


Have you any tips to make this possible?



Kind regards,
Chris