vaadin-login component issues when used with Lit-element
as per the sample code, under the vaadin-login advanced examples.
[https://vaadin.com/components/vaadin-login/html-examples]
(https://vaadin.com/components/vaadin-login/html-examples)
Login version 1.0.1
Issue:
Unable to open the supportDialog, or feedbackDialog due to the shadow dom?, perhaps i’m just missing something simple here… and someone can give some direction.
Description of problem area in code:
@forgot-password custom event is being called on the component, which then fires forgotDialog(e), I grab the proper shadow dom element with querySelector inside the forgotDialog callback function, however, when I try to enable the dialog and set it to true, nothing happens. Everything else is working perfectly.
import { LitElement, html } from 'lit-element'
import '@vaadin/vaadin-text-field/vaadin-email-field'
import '@vaadin/vaadin-text-field/vaadin-password-field'
import '@vaadin/vaadin-button';
import '@vaadin/vaadin-login';
class AuthView extends LitElement{
static get properties() {
return {
value: { type: Number }
}
}
render() {
return html`
<style>
.background-container{
background-image: url("../img/bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height:100vh; /* responsive height */
}
main{
display: flex;
justify-content: center;
padding: 25px;
}
</style>
<div class="background-container">
<main class="form-container">
<vaadin-login-form id="login-form"
@login="${(e) => console.log(e.target)}"
@forgot-password="${(e) => this.forgotDialog(e)}"
></vaadin-login-form>
</main>
<vaadin-dialog id="feedbackDialog">
<template>Login is being processed</template>
</vaadin-dialog>
**<vaadin-dialog id="supportDialog">
<template>Please contact support</template>
</vaadin-dialog>**
</div>
`;
}
forgotDialog(e) {
var supportDialog= this.shadowRoot.querySelector('#supportDialog');
console.log(supportDialog);
**supportDialog.opened = true; // why does this not work!**
}
// firstUpdated lifecycle method fires after render
firstUpdated() {
};
};
customElements.define('auth-view', AuthView);