top of page
  • Writer's pictureAvi Rai

Dynamic Styling LWC using Data Attributes

Hello Everyone,

We saw one use of data attributes to pass information to the javascript in my previous blog, give it a read here. In this blog, we will learn one more use of data attributes. We can use data attributes to style the LWC dynamically. We can do this in cases where the criteria of styling differ for elements. For example - when showing the account list if we have to highlight the active accounts.

For this, we have to define a data attribute in the HTML element we need to style and then use that data attribute as a selector in CSS. The syntax for using a data attribute as a CSS selector is to enclose the data attribute and criteria in the square bracket.

For instance, if the data attribute is "data-status" and the condition criteria is "Inactive", then do as follows:

[data-status='Inactive'] {
    border: 1px solid red;

In the below example, I am showing all the accounts and styling active accounts with green colour and inactive accounts with red colour on border.


    <lightning-card title="Accounts" icon-name="standard:account">
        <div class="slds-p-around_medium">
            <ul class="slds-has-dividers_around-space">
                <template for:each={accounts} for:item="account">
                    <li class="slds-item" key={account.Id} data-status={account.Status}>


[data-status='Inactive'] {
    border: 1px solid red;

[data-status='Active'] {
    border: 1px solid lightgreen;


1,543 views0 comments

Recent Posts

See All

What is Modal? A modal overlays a popup on top of the current app window. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards.

What are Platform Events? Platform events are the event messages (or notifications) that your apps send and receive to take further action. They simplify the process of communicating changes and respo

Post: Blog2_Post
bottom of page