How to select a element using querySelector that has dynamic name?

Question

I have a lightning-button-icon with dynamic name and i want to update its selected attribute based on the name. Can someone tell me how can i do that?

my code (UPDATED):

<lightning-layout-item size="3">
                    <lightning-button-icon-stateful
                        data-class="slelectState"
                        data-index1={inx1}
                        data-index2={inx2}
                        data-id={pair.key}
                        name={pair.key}
                        icon-name="utility:check"
                        selected={selectState}
                        alternative-text="True"
                        onclick={handleSelect}>
                    </lightning-button-icon-stateful>
                    <lightning-button-icon-stateful
                        data-class="UnslelectState"
                        data-index1={inx1}
                        data-index2={inx2}
                        data-id={pair.key}
                        name={pair.key}
                        icon-name="utility:close"
                        selected={unSelectState}
                        alternative-text="False"
                        onclick={handleUnSelect}>
                    </lightning-button-icon-stateful>
                </lightning-layout-item>

I tried this code this.template.querySelector([name="${selectedname}"]) as per @sfdcfox answer here but it gave me null value.

Answer 1

As of now, You can only query elements with the attributes that are exposed on the element - in this case lightning-button-icon-stateful. The attribute name is not directly placed on this element but it is on internal element.

If you want to see what items you can query, look at the following example.

For example

<lightning-button-icon-stateful
                                    data-index1={inx1}
                                    data-index2={inx2}
                                    name={pairkey}
                                    icon-name="utility:check"
                                    selected={selectState}
                                    alternative-text="True"
                                    onclick={handleSelect}>
    </lightning-button-icon-stateful>

When you do console.log(this.template.querySelector('lightning-button-icon-stateful'));

Output in console:

<lightning-button-icon-stateful c-app_app="" data-index1="12" data-index2="13"></lightning-button-icon-stateful>

So we can only do querySelector with attributes data-* (data-index1, data-index2) and c-app_app (auto generated based on class).

It cannot retrieve elements with other attributes using querySelector, so the following will always be null.

console.log(this.template.querySelector('lightning-button-icon-stateful[name="12"]'));

So in short, you can only retrieve data attributes in the given example as other elements are actually placed on internal element.

Reference: How to target LWC by name attribute?

Alternatively, you can query based on DOM element and iterate the result and verify the name. something like this.

this.template.querySelectorAll('lightning-button-icon-stateful').forEach(ele => {
            if(ele.name == selectedname){
                //TODO
            }
        });

Answer 2

For LWC html

                <template for:each={questions} for:item="q">
                    <p key={q.Id}>{q.Sequence_Number__c}.{q.Question_Text__c} <br>
                    <lightning-textarea data-id={q.Sequence_Number__c} name={q.Sequence_Number__c} required value="" placeholder="Type your answer here..." label='max length 200 characters' maxlength="200" min-length="10" message-when-too-long="A maximum of 200 characters are allowed in a tweet." message-when-value-missing="You need to fill all answers" field-level-help="Please fill the answers to submit" ></lightning-textarea>
                    <br><br>
                    </p>
                </template>
            </template>

In LWC Js COntroller use this code.

for(var i=1; i<=this.questions.length; i++){ console.log('Answer no : '+i);

    this.template.querySelectorAll('lightning-textarea').forEach(ele => {
        if(ele.name == i){
            console.log(ele.value);
        }
    });
    
}

Where this.questions is a list from apex controller.