this.template.querySelector is not returning list of objects in LWC

Question

I have a requirement where I have to make a checkbox checked/unchecked based on the boolean field on Case object. When I am trying to select the element using querySelector, its not returning the list of selected nodes. Am I missing something?

<template if:true={lineOfBusiness}>
    <div class="row first-selection-menu">
        <div class="first-selection-combobox">
            <h1 class="combobox-label">Line of Business</h1>
            <lightning-combobox
                label="Line of Business"
                variant="label-hidden"
                name="lineofBusiness"
                value={value}
                placeholder="Select the line of business"
                options={lineOfBusinessPicklistValues}
                onchange={handleLineBusinessChange}
            >
            </lightning-combobox>
        </div>
        <template if:true={showIsEscalated}>
            <div class="escalated-checkbox">
                <!-- Shuchi -->
                <!-- <input type="checkbox" id="escalated" name="escalated" onchange={handeEscalation} /> -->
                <input type="checkbox" data-id="escalated" name="escalated" onchange={handeEscalation}/>
                <label for="escalated" class="checkbox-label"
                    >Technical Escalation to an expert
                </label>
            </div>
        </template>
</template>

---

handleSelectedMain(event) {
    this.mainSelectionValue = event.target.value;
    if (this.mainSelectionValue === 'Transfer Case') {
        this.lineOfBusiness = true;
        if (this.showIsEscalated) {
            console.log(this.template.querySelector('[data-id="escalated"]'));// getting proxy object
        console.log(JSON.stringify(JSON.parse(this.template.querySelector('[data-id="escalated"]')))); // getting proxy object
                       this.template.querySelector('[data-id="escalated"]').checked = getFieldValue(
            this.caseRecord,
            ESCALATION_FLAG
        );
        }
    }
    this.showMainHelp = false;
}

Answer 1

Proxy is a tool used by developers to trap certain events. Lightning Locker Service and Lightning Web Security uses a Proxy to ensure that data is accessed correctly.

As a simple demonstration to this, consider the following code:

let x = new Proxy({}, { get() { return 'Hello World'; } });
console.log(x.aMessage); // 'Hello World';
console.log(x.anotherMessage); // 'Hello World';

Here, we create a trap that always returns the same value, no matter the input.

It's helpful to note in the previous example, that running code does not see it as a Proxy:

console.log(x instanceof Proxy); // won't return true here

As far as your running code is concerned, the returned element is whatever is inside the Proxy.

With that out of the way, the next thing to note is that querySelector returns just one Element, not a NodeList that querySelectorAll would. We expect to receive a single Element wrapped in a Proxy that is transparent to the code.

However, note that there is the Component Lifecycle. Changes you make to a property are not immediately rendered as a new version, you must wait for a render cycle. setTimeout is not recommended, so your best option is to add an asynchronous wait.

We do that with a combination of async to indicate the function is wrapped in a Promise, and we use await Promise.resolve() to allow the DOM to update before continuing.

async handleSelectedMain(event) {
    this.mainSelectionValue = event.target.value;
    if (this.mainSelectionValue === 'Transfer Case') {
        this.lineOfBusiness = true;
        // Allow the DOM to update.
        await Promise.resolve();
        if (this.showIsEscalated) {
            this.isEscalatedValue = this.caseRecord.data.fields.IsEscalated.value;
            //want to check/uncheck the checkbox based on above field value. Tried using value attribute on input checkbox node and used this property      there.Not working as well
            console.log(this.template.querySelector("div")); // getting proxy object, image attached
            console.log(this.template.querySelector("input"));
            console.log(this.template.querySelector('[data-id="escalated"]')); //getting null in console
            // this.template.querySelector('[data-id="escalated"]').checked = this.caseRecordDetail.data.fields.IsEscalated.value; 
            // tried setting checked on the element but not working as element is not selected may be
        }
    }
    this.showMainHelp = false;
}