3

I am facing this issue in many out of the box LWC components. I am trying to change the style of text area by defining a css class. But it is failing to override the slds style at run time? Any idea?

<template>
    <div class="row slds-m-vertical_large">
        <h2 class="header">Basic Examples</h2>
        <lightning-textarea 
        name="input1" 
        label="Enter some text"
        class="mytextarea">
        </lightning-textarea>
    </div>
</template>

.mytextarea{
    height: 150px;
}

You can find this live at : https://developer.salesforce.com/docs/component-library/tools/playground/QWa-zfwxW/1/edit

7

As @sfdcfox mentioned, this is both a feature, and a limitation, of LWC's "shadow DOM" feature. You can create your own custom component. But, there is a workaround how to over come LWC's "shadow DOM".

A. Creating custom component approach

Scenario You need to change styling of component which is simple to implement.

You can create standard html tag and apply your custom styling.

<div class="slds-form-element slds-form-element_horizontal">
    <label class="slds-form-element__label" for="horizontal-input-id-02">Textarea Input</label>
    <div class="slds-form-element__control">
        <textarea id="horizontal-input-id-02" placeholder="Placeholder Text" class="slds-textarea"></textarea>
    </div>
</div>

B. LWC's shadow dom workaround

Scenario You need to change styling of component which is hard to implement.

  1. Create separate CSS file with you styling. Make CSS selector as detailed as possible. General selectors like div will override styling of every div element on your page (not only on your component).
  2. Upload CSS file as static resource.
  3. Load your style in JS like this:
import { LightningElement } from 'lwc';
import CUSTOM_CSS from '@salesforce/resourceUrl/custom_css';

export default class TestComponent extends LightningElement {
    connectedCallback() {
        loadStyle(this, CUSTOM_CSS)
        .then(() => {});
    }
}
3
  • +1. B is right. Nice!. A is not feasible most of the times. Aug 7 '19 at 7:20
  • 2
    B maybe works as of today but is disencouraged by sfdc - as soon as the real shadow dom is enabled it will break. They will release css modules next release (not sure if that will change sth) - but using global styles to break their semantic shadow should be used carefully
    – Renji-xD
    Aug 7 '19 at 10:23
  • 1
    Thanks so much!. I am going to try both option, I prefer A. Thanks!
    – malu
    Aug 7 '19 at 13:25
6

It is possible to access and change the styling of inner elements of standard component with static resource - as shown in answer by @BlackCat

I see that you have created component various for testing this. If you try to inspect the element created:

<c-various c-various_various-host="">
    <div c-various_various="" class="row slds-m-vertical_large">
        <h2 c-various_various="" class="header">Basic Examples</h2>
        <lightning-textarea c-various_various="" class="mytextarea slds-form-element"><label for="input-3"
                   class="slds-form-element__label">Enter some text</label>
            <div class="slds-form-element__control slds-grow"><textarea id="input-3" name="input1"
                          class="slds-textarea"></textarea></div>
        </lightning-textarea>
    </div>
</c-various>

enter image description here

Here, as you see the class mytextarea is added to the wrapper component. So, even if you increase the height, the styles/height of inner textarea element will not change. The height will be applied to outer wrapper element only. So, when you modify the styles like color, background-color etc, it will be applied to wrapper element.

Also note that you cannot do something like

.mytextarea.slds-textarea{
    height: 150px;
}

because thats inside closed shadow DOM. This was possible earlier with Aura component, but now its not possible because even Aura is using LWC component behind the scenes (according to unofficial salesforce support)

1
  • Thanks for the info. It sucks but it makes sense. I will try the workaround suggested by @BlackCat
    – malu
    Aug 7 '19 at 13:24
2

The problem at hand is a feature known as CSS isolation. This allows you to modify a few attributes of the component as if it were an HTML element, but you can't change most of the internal styling. I went ahead and edited your example to create a new example where the size of the component is set to 150px and a red background is applied to the component, to demonstrate how this affects the component.

.mytextarea{
    background-color: red;
    min-height: 150px;
    display: inline-block;
}

Here, you can see the box now covers 150px, but the text box is the same height as before. This is both a feature, and a limitation, of LWC's "shadow DOM" feature. If you want a custom text area that's SLDS-styled, you need to write your own custom component.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.