constructorweb-componentonloadlit-elementlit

lit: no attributes values in constructor

I'm building a count down in lit, and there is no HTML attributes (count, width, color, colorback, display) values unless adding timeout to constructor:

JS:

import { LitElement, html } from "lit";

class ProgressBar extends LitElement {
  static get properties() {
    return {
      count: { type: Number },
      width: { type: Number },
      color: { type: String },
      colorback: { type: String },
      display: { type: String },
    };
  }

  render() {
    let output = "";
    if (this.display === "true") {
      output = html`
        <style>
          :host > div {
            background-color: ${this.colorback};
            width: 100%;
          }
          :host > div > div {
            background-color: ${this.color};
            width: ${this.width}%;
            height: 30px;
          }
        </style>
        <div>
          <div></div>
        </div>
      `;
    }
    return output;
  }

  draw() {
    let self = this;

    let x = self._date_end - +new Date();
    self.width = (x * 100) / self.count;

    if (self.width > 0) {
      window.setTimeout(function () {
        self.draw();
      }, 1000 / 60);
    } else self.width = 0;
  }

  main() {
    let self = this;
    self._date_end = new Date(+new Date() + self.count);
    self.draw();
  }

  constructor() {
    super();
    let self = this;
    // working
    window.setTimeout(function () {
      self.main();
    }, 1000);
    // not working
    self.main();
  }
}

window.customElements.define("progress-bar", ProgressBar);

HTML:

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <progress-bar
      display="true"
      width="100"
      color="#4cAf50"
      colorback="#ddd"
      count="5000"
    >
    </progress-bar>
    <script src="main.js"></script>
  </body>
</html>

How to deal with it? Thank you

Solution

  • Using connectedCallback method works fine:

    connectedCallback()
{
    super.connectedCallback()        
    this.main()
}

constructor()
{
    super()
}

    https://lit.dev/docs/components/lifecycle/#connectedcallback