Dynamic CSS in LWC

February 14, 2021 nisarkhan LWC, 0

<template>
    <lightning-card title="Dynamic CSS">
        <div class="slds-var-m-around_medium">
            <lightning-input type="number" value={percent} label="Percentage" 
            onkeyup={changeHandler}></lightning-input>
            <div style={percentage} class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
              some message!!!
            </div>
        </div>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';

export default class DynamicCss extends LightningElement {
    percent = 10
    changeHandler(event){
        this.percent = event.target.value
    }
   get percentage(){
        return `width:${this.percent}%`
    }
}

Accessing Elements in the Component in LWC Lifecycle Hooks in Mounting Phase in LWC – Parent/Child