Web组件中页面加载的模式弹出窗口

Question

I am newbie to lit-element and I would like to create a modal component using litelement, Modal should show on page load and automatically close after 20 seconds.
Here is my code snippet:

import { LitElement, html } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';

export class Modal extends LitElement {

  connectedCallback(){
    super.connectedCallback();
    this.modalTimer();
  }

  modalTimer(){       
    this.shadowRoot.getElementById("modalContainer").classList.remove('show');
  }

  render() {
    return html`
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">  
      <style>
        .modalContainer {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background: black;
          opacity: 0.5;
          z-index: 10;
          display: none;
        }    
        .modal {
          width: 200px;
          height: 200px;
          z-index: 15;
          background: red;
        }
        .show {
          display: flex;
        }
      </style>
      <div id='modalContainer' class="show">
        <div class='modal'>Here is the modal</div>
      </div>    
    `;
  }
}

customElements.define('element-modal', Modal);

Answer 1

You can simply add this JavaScript code,

window.onload = () => {
setTimeout(() => {
$('#modalContainer').modal({show:true});
}, 20000);
}

Answer 2

Try to put fadeOut behavior into firstUpdated() callback function.

firstUpdated (){
  const s = this.shadowRoot.getElementById('modalContainer').style;
  const delayInMilliseconds = 20000; //20 seconds

  // Your code to be executed after 20 seconds
  setTimeout(function() {
    s.opacity = 1;
    // Fade an element out and then remove it
    (function fade() {
      (s.opacity -= 0.1) < 0 ? (s.display = 'none') : setTimeout(fade, 40);
    })();
  }, delayInMilliseconds);
}