vaadin-login component issues when used with LitHTML

vaadin-login component issues when used with Lit-element
as per the sample code, under the vaadin-login advanced examples.
Login version 1.0.1

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`
        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 */
        display: flex;
        justify-content: center;
        padding: 25px;
      <div class="background-container">
          <main class="form-container">
          <vaadin-login-form id="login-form"
          @login="${(e) => console.log(}"
          @forgot-password="${(e) => this.forgotDialog(e)}"
          <vaadin-dialog id="feedbackDialog">
            <template>Login is being processed</template>
          **<vaadin-dialog id="supportDialog"> 
            <template>Please contact support</template>

  forgotDialog(e) {
    var supportDialog= this.shadowRoot.querySelector('#supportDialog');
    **supportDialog.opened = true;  // why does this not work!**

  // firstUpdated lifecycle method fires after render
  firstUpdated() {


customElements.define('auth-view', AuthView);

I tried your code and removed the extra ** parts which break the syntax. Also there is one extra double quote on id="login-form"".

Otherwise your code seems good except you’re missing the import for vaadin-dialog.

Just make sure you have installed vaadin-dialog:

npm i --save @vaadin/vaadin-dialog

And add an import for it:

import '@vaadin/vaadin-dialog';

The above code at least seems to work for me in a new LitElement app project after doing these simple fixes.

Thank you very much for taking the time to run that code, I will make sure to not include random **'s in the code next time. I was under the impression that dialog would somehow be imported through just the import of the login component. I’m fairly new to web components, so I also have a VSCode add in that will highlight syntax errors between `` html code.

Thanks again!!