salesforce lightning this.template.querySelector не работает

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 );
}  

значения не получают выборки в имени пользователя, переменных пароля. this.template.querySelector ('input [name = "username"]'). значение не работает.

Я также пробовал использовать подход события onchange для элементов ввода молнии, в этом случае event.target был не определен? Я застрял не в состоянии прочитать пользовательский ввод.

скриншот приложения

Answer 1

Элемент <template> не является общим элементом. Он хранит свое (неактивное) содержимое DOM внутри фрагмента документа, к которому вы можете получить доступ через свойство content.

Поэтому вам следует попробовать:

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