1

The general gist of this is to allow for css variables to dynamically update when the attribute on a component updates. This is possible with the Aura framework components using the aura:html tag like so:

Component.cmp

<aura:attribute name="width" type="Integer" default="50" />
<aura:html tag="style">
    :host {
        --width: {!v.width}%;
    }
</aura:html>
<div class="example">
    This is an example!
</div>

Component.css

.example {
    width: var(--width);
}

With this example when the width attribute is updated. The style rule updates with the variable value dynamically. This binding of values to css variables in lightning web components doesn't seem possible, certainly to me anyways. I have tried everything that I thought should have worked. I am not wanting to rely on external libraries and don't want the overhead of having to update the styles/classes of each individual element that needs to be updated. If we could have the binding of attributes to css variables like:

Component.html

<template>
    <div class="example">
       This is an example!
    </div>
</template>

Component.css

:host {
    --width: {width}%;
}

.example {
    width: var(--width);
}

I know this example is super simple but if the example class was shared with 50 other elements, being able to just update the value of this.width in the component javascript and have it update the css variable and therefore the rule, then we wouldn't need to add style="width:{width}%;" to every element, just have a shared css class.

Anyone found a way to do this?

EDIT

I would also like to say that the values that I am looking to insert here are calculated in the javascript from data retrieved and I don't think that design tokens allow me to update the values dynamically

  • 1
    have you tried to use lightning tokens? – Patlatus Mar 1 at 15:15
  • Can you update the values of design tokens in the javascript or do they always remain static to the value that it's originally set to? – Jonathon Chambers Mar 1 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.