How to Style Inner Elements of Standard LWC Components?

Question

How can we target inner elements of standard Lightning Web Components with CSS?

Answer

In LWC, styles are scoped to the component itself, which makes it difficult to style inner elements of standard Lightning Web Components like lightning-textarea. This is because LWC uses Shadow DOM-like encapsulation to prevent styles from leaking in or out of a component.

Explanation:

Consider the following example:
LWC Template (example.html):

<template>
    <lightning-textarea class="test"></lightning-textarea>
</template>

LWC CSS (example.css):

.test textarea {
    min-height: 500px;
}

The expectation is that this CSS would set the min-height of the <textarea> inside lightning-textarea to 500px. However, this does not work because of how LWC processes styles.
Compiled CSS:

.test[c-example_example] textarea[c-example_example] {
    min-height: 500px;
}

Generated HTML:

<lightning-textarea c-example_example lightning-textarea_textarea class="test"> 
   <textarea lightning-textarea_textarea></textarea>
</lightning-textarea>

The issue arises because LWC’s scoped CSS appends [c-example_example] to both .test and textarea, but textarea is inside lightning-textarea, which prevents the selector from matching. Unlike Aura components, where styles cascade down, LWC fully isolates styles, preventing direct styling of inner elements.

Workaround: Injecting a <style> Tag Dynamically

A workaround is to inject a <style> tag dynamically inside renderedCallback. This allows us to apply styles globally but in a controlled manner.

LWC JavaScript (example.js):

import { LightningElement } from 'lwc';

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);
    }
}

This method allows us to bypass LWC’s style encapsulation by applying styles at the document level while keeping them scoped to our component. However, this approach can be risky if not done correctly, as it may unintentionally affect other parts of the page, including the standard Salesforce UI.

See also: Modules in Lightning Web Components

Alternative Solutions:

1. Use the part attribute (if Salesforce adds support for it in the future).
   • The part attribute would allow developers to define exposed styling hooks inside standard LWC components, similar to how Shadow DOM works in modern web development.
   • Currently, Salesforce’s standard components do not expose part, so this solution is not yet available.
2. Create a Custom Component Instead of Using lightning-textarea.
   • If deep customization is required, building a custom textarea component provides full control over styling.
   • While this requires more effort, it avoids the limitations of LWC’s styling model.
     

See also: 61 LWC Lightning Web Component Interview Questions and Answers

Real-Time Project-Based Salesforce Course to Kick Start Your Career

Our Salesforce Course is designed to provide an in-depth understanding of the Salesforce platform, equipping you with the essential skills required to thrive in the CRM industry. The program covers key modules like Salesforce Admin, Developer, and AI, combining theoretical knowledge with hands-on experience. By engaging in real-world projects and assignments, you’ll gain the expertise needed to tackle complex business challenges using Salesforce solutions. Our experienced instructors ensure you acquire both technical proficiency and valuable industry insights to excel in the Salesforce ecosystem.

In addition to technical knowledge, our Salesforce Training in New York offers personalized mentoring, certification exam preparation, and interview coaching to boost your career prospects. You’ll have access to extensive study materials, live project experience, and dedicated support throughout your learning journey. Upon completing the course, you’ll be well-prepared for certification exams and equipped with the problem-solving skills that employers value. Take the first step in your Salesforce career with us and unlock exciting career opportunities. Register for a Free Demo today!