Prevent Lightning Tabset from rendering a hidden overflow button

Question

I notice that when using a <lightning-tabset>. It renders a hidden <li> which is an overflow button 'slds-tabs_default__overflow-button', with style visibility:hidden.

Can we prevent this <li> from being rendered ?

In the base component of the tabset, there is an api variable named disableOverflow. Tried setting this to true. But the <li> still rendered.

Answer 1

Have you tried giving it Style display:none

try this in js file:

renderedCallback(){
    let style = document.createElement("style");
    style.innerText = `lightning-tab-bar li.slds-tabs_default__item.slds-tabs_default__overflow-button{
        display:none;
    }`;
    this.template?.querySelectorAll('lightning-tabset')?.forEach(element => {
        element.appendChild(style)
    });
}