Dynamic CSS in LWC
<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