Overide CSS standard component LWC

Question

I have a simple lightning-vertical-navigation. I am trying to change the text color of the lightning-vertical-navigation-item but the css overide does not seems to works. Is there a way to do that?

mycomp.html

  ...<lightning-vertical-navigation selected-item={selectedItem} onselect={changeHandleAction}>
       <lightning-vertical-navigation-section>
           <template for:each={managedContents} for:item="cms">
               <lightning-vertical-navigation-item key={cms.managedContentId} label={cms.title}
                name={cms.managedContentId} > 
               </lightning-vertical-navigation-item>
           </template>
       </lightning-vertical-navigation-section>
  </lightning-vertical-navigation>...

mycomp.css

.slds-nav-vertical__action {
  color: purple !important;
}

Answer 1

It's a feature of LWC's Shadow DOM, which ensures both CSS and Element isolation.

CSS styles defined in a parent component don’t leak into a child

You're allowed to modify only what is defined in your component.
Since the element with slds-nav-vertical__action class is defined inside the lightning-vertical-navigation-item component you have no access and you cannot override its style.

If a component sets a css attribute using var() function, you can override it via Styling Hooks, but lightning-vertical-navigation-item doesn't provide such feature.

You could create your own vertical-navigation-item component from the blueprint in order to have full control on its styling.

Answer 2

It is expected behaviour of css encapsulation due to the shadom's DOM. If you want to modify the standard slds css property either you can use styling hooks.

Since currently salesforce doesn't support styling hooks for lightning-vertical-navigation-section, The alternative approach you can go for is

1. Create an external css file with your required css changes which doesn't support by salesforce currently and upload it as a static resource. Use that static resource in your lwc component. Please follow the link for reference.

2. Create your own slds blueprint for lightning-vertical-navigation-item

Any one of the above can solve your requirement.