Use template.querySelector with variable for selector?

Question

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!

Answer 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.