2

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.

2
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.
    – Community Bot
    Jan 4 at 10:27
  • I don't think it's possible to do it in LWC because of the shadow boundary. Basically, it would be best if you had a custom solution. You should use SLDS components. lightningdesignsystem.com/components/menus It will require a little bit of JS. And you will have more control over the HTML components. Jan 9 at 8:41

1 Answer 1

0

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>

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.