1

Is it possible to pass a string into this.template.querySelector in an effort to dynamically find whatever you're looking for? Here's an example of what I'm referring to.

What I'm trying to avoid:

updateStyling(sectionToggled, isActive){
  if(isActive){
    switch(sectionToggled){
      case 'A':
        this.template.querySelector('[data-id="A"]').className = '';
        this.template.querySelector('[data-id="A"]').className = 'contentVisible';
        break;
      case 'B':
        this.template.querySelector('[data-id="B"]').className = '';
        this.template.querySelector('[data-id="B"]').className = 'contentVisible';
        break;
      case 'C':
        this.template.querySelector('[data-id="C"]').className = '';
        this.template.querySelector('[data-id="C"]').className = 'contentVisible';
        break;
      case 'D':
        this.template.querySelector('[data-id="D"]').className = '';
        this.template.querySelector('[data-id="D"]').className = 'contentVisible';
        break;
      default:
  }
} else { (etc...) }

...

What I want to do (but isn't working)

updateStyling(sectionToggled, isActive){
  let querySelector = '[data-id="' + sectionToggled + '"]';
  if(isActive){
    this.template.querySelector(querySelector).className = '';
    this.template.querySelector(querySelector).className = 'contentVisible';
  } else {
    this.template.querySelector(querySelector).className = '';
    this.template.querySelector(querySelector).className = 'contentHidden';
  }
}

sidenote - console.log(typeof sectionToggled) = string

thanks in advance if anyone has suggestions!

2
  • Just to ask: any reason you're not using the native LWC if:true or if:false directives to conditionally render DOM elements? developer.salesforce.com/docs/component-library/documentation/… – pchittum Sep 4 '20 at 13:45
  • 1
    That's a good point, that would do the trick. It's just that the example I showed was simplified, I have various styles I want to incorporate based on different actions, and I'd rather update the styling than add to the HTML markup. – Thomas Reinman Sep 4 '20 at 18:58
1

This short answer is, yes. This should work.

I've got this working in a LWC playground at the moment with the following.

My CSS looks like this (I took a guess, as there wasn't anything to go on here):

.contentHidden {
    display: none;
}

My HTML template looks like this:

<template>
    <div data-id="A">This is the div</div>
    <lightning-button onclick={handleClickHide} label="Hide"></lightning-button>
    <lightning-button onclick={handleClickShow} label="Show"></lightning-button>
</template>

The js class looks like this:

import { LightningElement} from 'lwc';

export default class App extends LightningElement {
    handleClickHide(){
        const selector = 'A';

        const theDiv = this.template.querySelector('[data-id="' +selector+ '"]');
        theDiv.className = 'contentHidden';
    }
    handleClickShow(){
        const selector = 'A';

        const theDiv = this.template.querySelector('[data-id="' +selector+ '"]');
        theDiv.className = '';
    }
}

This kind of proves out the mechanics of a dynamic selector, if that's in fact what you're looking to test out.

On the other hand, if you simply need to make items appear/disappear from the DOM, the idiomatic way to do this in LWC is normally to use one of the LWC directives if:true or if:false.

In that case, here's some markeup for that:

<div if:true={show}>Toggle div</div>
<lightning-button label="Toggle" onclick={handleToggle}></lightning-button>

And this is your the JS that you'd need:

export default class App extends LightningElement {

    show = true;

    handleToggle(){
        this.show = !this.show;
    }
}

You can actually see a slightly different example of this in the Salesforce LWC Recipes sample app's implementation of conditional rendering in a LWC component.

3
  • thank you! I'll mark this one as closed. – Thomas Reinman Sep 4 '20 at 18:58
  • Since you're relatively new, and FYI, there's a "best answer" selection that you can use, if you feel it's appropriate. Cheers. – pchittum Sep 7 '20 at 8:44
  • thanks pchittum – Thomas Reinman Sep 8 '20 at 14:10

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.