Styling an LWC component with a lightning-tab to use the slds-has-success style

Question

I have a LWC component that includes a set of tabs using the standard "lightning-tabset" and "lightning-tab" metaphor. When the actions in a specific tab have been completed, I want to style the tab with a green checkbox icon, to indicate that it is complete. It doesn't appear this is possible, the only conditional icon I have found is the part of the show-error-indicator attribute. I found, as a possible alternative, the "slds-has-success" class that according to the lightningdesignsystem documentation should style the tab with a green background. Even with my prototype that hard codes the class on a tab, the background color does not change, and it appears that class is overridden when the lwc renders.

This is my prototype code:

<template>
<lightning-tabset>
    <lightning-tab label="Tab 1" value="tab1"  onblur={tabdeselect} tabindex="0" icon-name="utility:travel _and_places"  >
            <c-tab-container tab-name="Tab 1" onvisibilitychange={vischange} onblur={handleBlur} ></c-tab-container>
    </lightning-tab>
    <lightning-tab label="Tab 2" value="tab2"  onblur={tabdeselect} tabindex="0" icon-name="utility:user"  show-error-indicator={tab2haserror} > 
        <c-tab-container tab-name="Tab 2" onblur={handleBlur}></c-tab-container>

    </lightning-tab>
</lightning-tabset>
</template> 

The tab-container components currently just have a div with a text element showing the tab number.

Answer 1

Lightning Web Components introduced Shadow Dom. Therefore by standard you are not able to additionally modify ready to use LWC components in different way than by using attributes of the component (imagine that it is something like API for the component).

You can overcome your struggles in two ways:

1. Use icon-name (like you already do) or end-icon-name. When content under your tab is accepted, change attribute under end-icon-name to utility:success using js.
2. Use component blueprints from LightningDesignSystem and write your tabs 'manually'. You will have all the posibilities that you can imagine :)