Target inner elements of standard Lightning Web Components with CSS

LWC is enforcing the shadow DOM style scoping, so you can't currently style other Elements outside your shadow tree.

That being said, there is the on-going ::part and ::theme proposal that would allow components to safely expose some of their internals outside their shadow tree to be customized. This feature will be shipped in Chrome 73 and the rest of the browser vendors are supportive. We are currently evaluating how to add this in LWC and in the lightning base components.

We ran into the same problem. I think it is something that Salesforce should definitely address as it is the biggest limitation of LWC compared to Aura components that we have encountered so far.

For example, we wanted to give a different color to a lightning-icon component and the only way to do this is to change the css fill color of the svg element inside lightning-icon. But that svg is not accessible/visible to our component's css because of the strict CSS isolation enforced by LWC. Re-creating our own version of Salesforce base components or submitting an Idea anytime we want to do a little ui tweak to one of them does not seem viable to us.

The workaround that we ended up using is to put the CSS that we wanted applied to the inner shadow DOM of Salesforce Base Components in a static resource. Then we used the loadStyle method of lightning/platformResourceLoader module to load that css. The styles loaded this way do apply to the inner elements within Salesforce base components.

Documentation for the loadStyle method is available here: https://developer.salesforce.com/docs/component-library/documentation/lwc/create_third_party_library

Another approach would be to encapsulate your LWC component inside an Aura component and put the CSS targeting inner elements in the css file of that aura component. Aura components do not enforce strict CSS encapsulation so that CSS will apply.

Neither workaround is ideal so we are looking forward to a better solution provided by Salesforce. The ::part and ::theme proposal seems promising but it looks like it won't be available for a while.

The workaround that I have been using is to create a <style> tag and add it to the dom. This is somewhat dangerous if not done correctly because it can affect the entire css of the page including standard Salesforce UI

export default class Example extends LightningElement {
  renderedCallback() {
    if (this.hasRendered) return;
    this.hasRendered = true;

    const style = document.createElement('style');
    style.innerText = `
      c-example lightning-textarea textarea {
        min-height: 500px;
      }
    `;
    this.template.querySelector('.some.element').appendChild(style);
  }
}

Note that the selector uses c-example to scope the css, but doesn't necessarilly have to do so.