[SalesForce] Styling of a Lightning Web Component with shadows and padding

I am fairly new to lwc development. I want to style a text so that it appears as a regular lightning component.
Everything is working well … except the styling.

I want that the box does have a shadow and that the label and the "Not available" will be indented like the following "Key Facts" component.
Here is the code of the markup:

<template>
<template if:true={noWorkspaceId}>
        <div class="slds-box box-shadow: 0px 2px 5px silver;">
            <div class="slds-form-element slds-form-element_stacked slds-m-left_small">
                <span class="slds-form-element__label">{label}</span>
                <div class="slds-form-element__control">
                    <div class="slds-form-element__static slds-text-color_error">{notAvailable}</div>
                </div>
            </div>
        </div>
    </template>
<template>

I have tried to use padding or a margin but it does not work. Furthermore I am unable to add a shadow.
Could someone please help me?

Best Answer

There is an error in this line:
<div class="slds-box box-shadow: 0px 2px 5px silver;">

You cannot add inline style in class attribute. You could use style attribute, but a better choice would be rely on slds classes like .slds-tabs_card, here's the specs.

Change <div class="slds-box box-shadow: 0px 2px 5px silver;"> to <div class="slds-tabs_card"> in order to get the box shadowing and some padding.

The "Key Facts" component is a tabset and that tab starts with a card element.
You might not need a tabset if you have only one tab.

So to achieve that style the code should be:

<div class="slds-tabs_card">
    <lightning-tabset class="slds-text-heading_small">
        <lightning-tab label={label}>
            <lightning-card variant="Narrow" title={label} icon-name="standard:account">
                <lightning-button-icon icon-name="utility:down" variant="border-filled" alternative-text="Show More" slot="actions">
                </lightning-button-icon>
                <p class="slds-p-horizontal_small slds-text-color_error">{notAvailable}</p>
            </lightning-card>
        </lightning-tab>
    </lightning-tabset>
</div>

Related Solutions

[SalesForce] Lightning Web Component Styling – Textarea

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.

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).
Upload CSS file as static resource.
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(() => {});
    }
}

[SalesForce] Creating Record With Lightning Web Component

Without seeing all of your code, I can't answer with complete certainty, but I have an idea.

In lightning Web Components, as opposed to Aura, variable binding in inputs <lightning-input....> is one way, meaning just assigning value={var} doesn't cut it. This is due to shadow DOM. When using inputs in LWC, we must use event handlers to get the value of the input.

So rather than just

<lightning-input type="text" label="My Input" value={myVar} ></lightning-input>

We'd do:

<lightning-input type="text" label="My Input" value={myVar} onchange={handleChange}></lightning-input>

with this in the controller:

handleChange(ev){ 
    this.myVar = ev.detail.value;
}

For specific inputs, see the docs here

Best Answer

Related Solutions

[SalesForce] Lightning Web Component Styling – Textarea

[SalesForce] Creating Record With Lightning Web Component

Related Topic