Dynamic CSS in LWC
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
1 2 3 4 5 6 7 8 9 10 11 |
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