1

I have a requirement to position and render components dynamically based on the list of the maps I am getting as the input. So, I thought that I can construct the grid of slots and then iteratively fill it in with the content. I create slots using document.createElement() and then append them to the template DOM.

// child.js
connectedCallback() {
    this.createGrid();
}

createGrid() {

    const gridContainer = document.createElement("div");
    gridContainer.classList.add('slds-grid');
    gridContainer.classList.add('slds-gutters');
    // gridContainer.setAttribute("lwc:dom", "manual");

    const numCols = 1;

    for(let i = 1; i <= numCols; i++) {
        const columnDiv = document.createElement("div");
        columnDiv.classList.add('slds-col');

        const slot = document.createElement("slot");
        slot.setAttribute("name", `${i}.1`);
        columnDiv.appendChild(slot);

        gridContainer.appendChild(columnDiv);
    }
    this.template.appendChild(gridContainer)
}

And then I inject the content from the parent component

// parent.html
<template>
    <lightning-card class="slds-m-left_x-small">
    
        <c-child>

            <lightning-button name="button" label="button in the slot" slot="1.1"></lightning-button>

        </c-child>
    </lightning-card>
 </template>

However, I find the dynamically created slot empty in the markup, the content is not injected. enter image description here

When just for the experiment I add a static slot to HTML markup, everything works fine with the same content, it is getting correctly injected.

// child.html
<template>
    <div class="slds-grid slds-gutters" >
        <div class="slds-col">
            <slot name="1.1"></slot>
        </div>
    </div>
</template>

enter image description here

It appears to be another issue with slots in LWC framework. I know that recently the slot names were allowed to be dynamic https://help.salesforce.com/s/articleView?id=release-notes.rn_lwc_dynamic_slot_attribute.htm&release=244&type=5

But I do not find any caveat that slots are not allowed to be constructed dynamically... Please advise.

0

You must log in to answer this question.

Browse other questions tagged .