lightning-tabset and lightning-tab does not render properly

[rrcook]

Description

The lightning-tabset and lightning-tab combos do not render properly.

Steps to Reproduce

Make a lwc-oss app with lightning base components and styling as described here: https://developer.salesforce.com/blogs/2020/12/build-connected-apps-anywhere-using-lightning-base-components.html Then in between the container div and the link div, add a div with the lightning-tabset example from the component reference,

        <div>
            <lightning-tabset>
                <lightning-tab label="Item One">
                    One Content !
                </lightning-tab>
                <lightning-tab label="Item Two" title="2nd tab extended title">
                    Two Content !
                </lightning-tab>
                <lightning-tab label="Item Three">
                    Three Content !
                </lightning-tab>
            </lightning-tabset>
        </div>

Instead of rendering as it does in the component reference, it looks like this:

[git2gus[bot]]

This issue has been linked to a new work item: W-8619780

[git2gus[bot]]

This issue has been linked to a new work item: W-8619779

[bdub-sfdc]

@rrcook please see my chatter response, and respond in GUS work item W-8619779 so we can resolve the issue.

[rrcook]

@bdub-sfdc That link takes me to a Salesforce employee login, and I am not a Salesforce employee.

[bdub-sfdc]

@rrcook ok, understand that you can't see the work item.

is the issue you are seeing that the tabs don't have a white background color over top of the blue background in your screenshot? This was a recent change where the background color was removed, and is 'not a bug'. You could wrap your tab component in a card component.

If this is not the issue you are seeing, please describe the issue in a comment. Thanks!

[rrcook]

I surrounded my lightning-tabset with a lightning-card and still got bad results. I don't see the tab labels, and I see all the content for all the tabs at once.

[jeremyvial]

I face the same issue. Any news about this ?

[rrcook]

I haven't heard anything. I'm concentrating on internal Salesforce dev for the time being, hoping they get things figured out eventually.

[JeroenSfdc]

I can confirm that I face the same issue with both lightning-tabset as well as with the lightning-card base component. Other base components render fine (the few those I tested). Installed version lightning-base-components@1.12.3-alpha. @rrcook @jeremyvial.

[FabienTaillon]

In your index.js file, can you try inverting these 2 imports:

import { createElement } from 'lwc';
import '@lwc/synthetic-shadow';

to:

import '@lwc/synthetic-shadow';
import { createElement } from 'lwc';