0

This seems to me an odd problem. I have an LWC, it has an unordered list, then loops through items and creates a list item for each one.

I have an onclick for my list items so when a user selects one, I can change the color of the selected li to blue to visualize the currently selected item.

My onclick handler looks like this:

itemSelect(event){
    let allSelectedTiles = this.template.querySelectorAll('.selected-tile');
    for(let i = 0; i < allSelectedTiles.length; i++){
        allSelectedTiles[i].classList.remove('selected-tile');
    }

    let tileItem = event.target;
    tileItem.classList.add('selected-tile');
}

This correctly adds the selected-tile class to the item, and when inspecting, I see my new blue border style in the list of css.

The issue is my css looks like this:

.selected-tile {
    border: 2px solid rgb(0, 112, 210) !important;
}

But when inspecting the element after clicking and seeing that it has my class and border style, the border style is ignored in favor of some slds border styling for my list element. It is completely disregarding the !important in my css, that doesn't even show up in the browser inspector.

Is this expected? And if so, how can I toggle my border on and off on select? Using a getter doesn't really seem feasible as these list items are in an html template loop.

EDIT: Html for my list

<ul id="availableItemList" class="slds-has-dividers_around-space object-list">
                        <template for:each={filteredItems} for:item="item">
                            <li key={item.apiName} onclick={itemSelect} class="slds-item tile-item">
                                <lightning-tile label={item.label} class="slds-tile_board">
                                    <lightning-layout>
                                        <lightning-layout-item>
                                            <p>{item.secondaryLabel}</p>
                                        </lightning-layout-item>
                                    </lightning-layout>
                                </lightning-tile>
                            </li> 
                        </template>
                    </ul>

This is the relevant part of the html. I want the li to toggle a blue border, but !important is doing nothing.

If I go into the inspector, and add !important to my custom style, it works, but it should be there from the get go....

  • what does your template html look like for the component – glls Mar 19 at 14:52
  • I added the relevant HTML @glls – Tyler Dahle Mar 19 at 15:08
  • Looks like Salesforce strips "!important" from css with LWCs. Couldn't find any mention of it in the docs, but the same thing happened to me. That said, your code worked for me in that it showed a blue border around the element I clicked. Might be worth asking a different question specific to toggling .css classes on elements. – Jake Richter Mar 19 at 22:27
  • I believe for me, in chrome, the slds-has-dividers_around-space was using it's gray border, and not allowing my new css class to come through. My selected-tile class would always be crossed out in favor of the slds class. It toggles onto the element just fine. I suppose I could get rid of that slds class and try to just recreate it in a custom one and see if that works, it just would have been convenient to do it with a simple class toggle. – Tyler Dahle Mar 19 at 22:33
  • 1
    Thanks @pmdartus. I had seen doing what you did in that playground as a solution to dynamic class manipulation. I was hoping to get away with just a quick easy class toggle, but may not be able to get away from doing something like what you had in the playground. I do wonder if this is a bug with LWCs? Or expected behavior. The !important seems to work in playground, so it is not like it just throws it out as a rule... but does so in scratch orgs. – Tyler Dahle Mar 20 at 13:43
0

So I found a solution playing around with the css more that works when toggling the class exactly like I have set up in my original post.

However, instead of having

.selected-tile{
    border: 2px solid blue !important;
}

You only need .slds-has-dividers_around-space>.slds-item.selected-tile{ border: 2px solid rgb(0, 112, 210); }

It is the .slds-has-dividers_around-space>.slds-item styling on the li that overwrites my important styling with selected-tile.

This is an answer for my specific situation, but not really one as to why they strip away the important tags in css and how to overcome that in a more general sense...

But I suppose if a class is overwriting !important styling, hijacking that class and appending your toggled class onto it seems to work.

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.