1

I wan't to offload tab loading (and separate concerns) from my lightning-tabset container.

When I naively wrap my components I get errors which I find rather hard to parse.

<template>
    <template if:true={dpc.tables}>
        <lightning-tabset variant="scoped">
            <template for:each={dpc.tables} for:item="table">
                <c-some-table-sheet table={table} key={table}>
                </c-some-table-sheet>
            </template>
        </lightning-tabset>
    </template>
</template>

someTableSheet:

<template>
    <lightning-tab label={table} key={key} >
        One Content {table}
    </lightning-tab>
</template>

I suspect that there's something to do with violating DOM contract here?

Edit: Not really able to get any meaningful error, but JS debugger pauses on this exception TypeError: b.loadContent is not a function at _showTabContentForTabValue(a) { function.

1
  • 1
    It works when you bring tab itself as a direct child of for:each? I am curious what you mean by offloading tab loading as tab is already lazy loading IIRC.
    – tsalb
    Apr 14, 2019 at 14:28

1 Answer 1

2

The <lightning-tabset> expect <lightning-tab> as slotted element. By wrapping the <lightning-tab> with your own component you breaking this contract.

The <lightning-tabset> throws an error _showTabContentForTabValue because it is trying to communicate with your wrapper component thinking it's a standard <lightning-tab>.

You must log in to answer this question.

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