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.

HTML

<template>
    <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}>
                        {account.Name}
                    </li>
                </template>
            </ul>
        </div>
    </lightning-card>
</template>

CSS

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

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

Result