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

createGrid() {

    const gridContainer = document.createElement("div");
    // gridContainer.setAttribute("lwc:dom", "manual");

    const numCols = 1;

    for(let i = 1; i <= numCols; i++) {
        const columnDiv = document.createElement("div");

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


And then I inject the content from the parent component

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

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


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
    <div class="slds-grid slds-gutters" >
        <div class="slds-col">
            <slot name="1.1"></slot>

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.


You must log in to answer this question.

Browse other questions tagged .