Adding or Removing CSS Class in Lightning Web Component Pragmatically

Are you looking for applying dynamic CSS Class in Lightning web Component? LWC framework doesn’t allow computed expressions in html markup to change CSS Class in Lightning Web Component dynamically but there are ways to do so. The implementation of CSS for Lightning Web Components adheres to the W3C standard. You can create a style sheet in the CSS file, and it’s automatically applied to the corresponding HTML file.

Use Case: Change HTML element’s CSS class in Lightning Web Component on button click

We are going to build one component where we will have two button and a div box. Our aim is to change the CSS class of the div box based on button click. Watch this:-

We are changing the CSS class of the div box based on button click in Lightning Web Component. Check out demo on changing CSS Class in Lightning Web Component playground:- Lightning Web Component playground

Basically, Playground help you to learn and build out proof of concept Lightning web components and share them with your colleagues and Salesforce Ohana friends.

Let’s check out the code and understand it. In Lightning web component, we generally have three files. They are html, js and meta.xml file. We can add CSS file too if it is required in the component bundle.

app.html

The html file has a div block and two button. Also, We have defined an data-id for div block. It will help us to query HTML element in js file. It also has two button with labels Class 1 and Class 2.

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData().

<template>
    <div data-id="divblock" class="navBar">
        sanket
    </div>
    <lightning-button variant="brand" label="class 1" title="Primary action" onclick={handleClick1}
        class="slds-m-left_x-small"></lightning-button>
    <lightning-button variant="brand" label="class 2" title="Primary action" onclick={handleClick2}
        class="slds-m-left_x-small"></lightning-button>
</template>

app.js

The JavaScript file has two methods each for button in html file. When users clicks on button, the respective method gets fired and it queries the HTML element of the div block and pragmatically changes the class name of the div block.

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
    handleClick1(){
        var divblock = this.template.querySelector('[data-id="divblock"]');
        if(divblock){
            this.template.querySelector('[data-id="divblock"]').className='class1';
        }        
    }
    handleClick2(){
        var divblock = this.template.querySelector('[data-id="divblock"]');
        if(divblock){
            this.template.querySelector('[data-id="divblock"]').className='class2';
        }
    }
}

app.css

.class1 {
    background-color: #e6e618;
}
.class2 {
    background-color: #df6e18;
}

Key learning here is using HTML DOM Element Object and its method and properties in your Lightning Web Component. We have used className to Sets or returns the value of the class attribute of an element. It helped us in changing the CSS Class of html element in LWC dynamically.