How get lightning-tree to render separate component instance per each line

Question

I have an application that utilises mix of nested tabsets and trees - see this playground: https://webcomponents.dev/edit/vXwtMddn7CcREzy4KXK4

I'd like lightning-tree to behave more like lightning-tabset - aka each of the "tab" get it's own instance. Right now my app passes selectedGroup which in turn fires some wire services which only work once and cause all sort of annoying side effects.

Before I go in an fork lightning-tree off github - perhaps there's a simpler way to get separate instances of component? Perhaps wrap whole tabset into separate component?

Answer 1

Found a way to do this, full demo here

TLDR - iterate instances that I wanna render and dynamically update their visibility. Keep cache of already rendered components and use css to hide ones we don't need.

Component:

            <lightning-tree items={groupsTree} onselect={selectGroupByEvent}>
            </lightning-tree>
            <template for:each={groupsTree} for:item="j">
                <template if:true={j.isRendered}>
                    <div class={j.isDisplayed} key={j.name}>
                        <c-child selected-group={j}>
                        </c-child>
                    </div>
                </template>
            </template>

Code:

    groupsTree = [
        {
            label: 'Group 1',
            description: 'le group uno',
            name: '1',
            expanded: true
        },
        {
            label: 'Group 2',
            description: 'le group dos',
            name: '2',
            expanded: true
        }
    ]
    rendersCache = new Set()
    selectGroupByEvent(event) {
        this.selectGroup(event.detail.name)
    }
    selectGroup(selectedGroup) {
        this.groupsTree = this.groupsTree.map(i => {
            i.isRendered = this.rendersCache.has(i.name) || i.name === selectedGroup
            if (i.isRendered) {
                this.rendersCache.add(i.name)
            }
            i.isDisplayed = i.name === selectedGroup ? 'slds-show' : 'slds-hide'
            return i
        })
    }
    connectedCallback(){
        this.selectGroup(this.groupsTree[0].name)
    }