Can I use Javascript params inside CSS for LWC?

Question

Trying to do something like this:

    .active{
      background-image:url("'+this.imgURL+'")
    }

I need to prefil an image url from a static resource on load on a html element with a specific "active" class and not on the rest of them.

    <lightning-button-menu class="slds-p-left_small slds-p-top_large" name={col.typeAttributes.columnFilterFieldName} style="position: absolute;"
                            alternative-text="Show menu" variant="container" icon-name="utility:threedots_vertical" onselect={handleTextFilterOptions}>
                              <lightning-menu-item value="contains" label="Contains" class="active" 
                              data-name={col.typeAttributes.columnFilterFieldName} onclick={handleClickMenuItem}></lightning-menu-item>
                              <lightning-menu-item value="begins" label="Begins with" 
                              data-name={col.typeAttributes.columnFilterFieldName} onclick={handleClickMenuItem}></lightning-menu-item>
                              <lightning-menu-item value="clear" label="Clear filters" icon-name="utility:record_delete" 
                              data-name={col.typeAttributes.columnFilterFieldName}></lightning-menu-item>
</lightning-button-menu>

tried both:

    connectedCallback(){
        this.template.querySelector('.active').style = 'background-image:url("'+this.checkImg+'");padding-left: 10px;' ;
    }
    renderedCallback(){
        this.template.querySelector('.active').style = 'background-image:url("'+this.checkImg+'");padding-left: 10px;' ;
    }

This logic works on click but I want to preload it into the css or on load.

Answer 1

You can not use java script variable inside the CSS

But what you can do is, you can write the CSS in js variable and use it as inline css in HTML tag.

Example:

JS

cssVar = '';
connectedCallback(){
   this.cssVar = `background- 
   image:URL("${this.checkImg}");padding-left: 10px;` ;
}

HTML

<div style={cssVar}> Something... </div>