salesforce lightning this.template.querySelector not working

Question

<template>
    <div class="container-wrapper">
            <div if:false={loggedIn} class="slds-m-around_medium">
                    <span>Login to Salesforce App</span>
                    <lightning-input name='username' label="Username"></lightning-input>
                   <lightning-input type="password" name='password' label="Password"></lightning-input>
                   <br/>
                   <lightning-button variant="brand" label="Login" title="Login" onclick={login}></lightning-button>
           </div>
</div>
</template>
  login() {
        console.log('login attempt');
        console.log(this.template);
         var Username =this.template.querySelector('input[name="username"]').value;
        var Password =this.template.querySelector('input[name="password"]').value;
        console.log(Password);
        console.log(Username );
}  

values are not getting fetch in username, password variables. this.template.querySelector('input[name="username"]').value is not working.

I have also tried onchange event approach on lightning-input elements , in that case event.target was undefined ? I am stuck not able to read user input.

app screenshot

Answer 1

There is no property 'name' on lightning-input like on standard HTML input. You should use 'data-id' instead.

HTML:

<lightning-input data-id='username' label="Username"></lightning-input>

JS:

let username = this.template.querySelector('lightning-input[data-id=username]');

Answer 2

The <template> element is not a common element. It holds its (inactive) DOM content inside a Document Fragment that you can access through the content property.

Therefore you should try:

    var Username = this.template.content.querySelector('input[name="username"]').value;
    var Password = this.template.content.querySelector('input[name="password"]').value;

Answer 3

In Salesforce when you are accessing a lightning input using the query selector first you have to search for lightning-input tag not the input tag.

Secondly when you add a name attribute to the lightning-input that attribute is transfered to the input tag which is created when the lightning component is rendered. But you can not access the input tag (my assumption is that it's in the Shadow DOM). Therefore to search for the lighting-input you must use a class name to identify the lightning component.

<lightning-input type="number" class="optionEditQuantityVal" value={Quantity} variant="label-hidden" step="1" max-length="1"></lightning-input>

let input = this.template.querySelectorAll('lightning-input.optionEditQuantityVal')