LWC中为lightning-tab设置的图标颜色不生效该如何解决？

问题根因 #

你直接给lightning-tab绑定自定义类修改图标变量不生效，是因为lightning-tab的Shadow DOM封装导致你定义在父级的--lwc-colorTextIconDefault变量无法作用到组件内部内置的lightning-icon实例上，组件内部预设的图标样式优先级更高，覆盖了你自定义的变量。

解决方法 #

方法1：自定义label插槽（推荐，兼容性最高） #

放弃使用lightning-tab原生的icon-name属性，通过label插槽自己实现标签栏的图标+文本结构，完全自定义样式控制：

HTML代码

<lightning-tabset variant="vertical" >
    <lightning-tab label="demo label1">
        <!-- 自定义label插槽内容 -->
        <span slot="label">
            <lightning-icon icon-name="utility:adduser" size="x-small" class="tab-icon-blue"></lightning-icon>
            <span class="slds-m-left_x-small">demo label1</span>
        </span>
        demo label1 内容
    </lightning-tab>
    <lightning-tab label="demo label2">
        <span slot="label">
            <lightning-icon icon-name="utility:adduser" size="x-small" class="tab-icon-red"></lightning-icon>
            <span class="slds-m-left_x-small">demo label2</span>
        </span>
        demo label2 内容
    </lightning-tab>
</lightning-tabset>

CSS代码

.tab-icon-blue {
    --lwc-colorTextIconDefault: blue;
}
.tab-icon-red {
    --lwc-colorTextIconDefault: red;
}

方法2：使用组件暴露的part匹配内部图标（无需修改HTML结构） #

如果要保留原生icon-name属性的写法，可以通过组件暴露的icon part定位到内部的图标实例，再覆盖样式变量：

CSS代码

.class1 [part~="icon"] {
    --lwc-colorTextIconDefault: blue;
}
.class2 [part~="icon"] {
    --lwc-colorTextIconDefault: red;
}

注意：该方法依赖Salesforce对lightning-tab组件part命名的约定，后续组件版本更新可能出现命名变更导致失效。

内容的提问来源于stack exchange，提问作者VJay