0

Following the question I would like to ask about the appropriate way to check the initial render status of a component (not the update status) in shadow DOM. Is there any similar to document.readyState or a promise?

I have also tried to do:

getItems() {
    this.updateComplete
      .then(() => {
        this.nodesLists = this.shadowRoot.querySelectorAll(".name");
      })
      .then(...)
  }

which also failed.

Tia

SONewbiee
  • 363
  • 2
  • 15

1 Answers1

2

await this.updateComplete (or this.updateComplete.then(...)) is the correct way to wait until the element has no pending render work before e.g. querying the state of the element's rendering, so your code should generally work as long as the element is connected to the document before running getItems.

Example: https://jsbin.com/jiquhez/edit?html,console,output

Note however, that if you await updateComplete before the element is connected and the element has no properties set that would trigger a render, then updateComplete currently resolves before the first render. This may be considered an unintended bug, filed at lit-element/#594.

Note you may also want to look into using the firstUpdated lifecycle method, depending on your use case. This is a method you can implement on your class to perform one-time work following the first update/render cycle for the element (useful for e.g. selecting static nodes that won't change based on rendering).

Example: https://jsbin.com/limikas/edit?html,console,output

Kevin Schaaf
  • 76
  • 1
  • 1
    Thnks for your interest and time. I have managed to run the element successfully by including in `constructor() {}` the following code `setTimeout(() => { this.initialise() }, 0);`. Unfortunately, when the following code is included `this.updateComplete .then (() => { this.initiallise(); });` the output is not correctly displayed. I have to change it as follows: `this.updateComplete .then (() => { setTimeout( () => { this.initiallise(); }, 0); });` [Intervalia](https://stackoverflow.com/users/1253074/intervalia) was correct (to be cont'ed at the next message) – SONewbiee Feb 27 '19 at 11:21
  • [Intervalia's](https://stackoverflow.com/users/1253074/intervalia) comment was correct at this [message](https://stackoverflow.com/questions/54869489/getting-a-node-list-by-queryselectorall) about using `setTimeout()`. – SONewbiee Feb 27 '19 at 11:26
  • 1
    @SONewbiee Can you confirm that your code is calling `this.updateComplete.then(() => this.initialise())` before setting any properties in the constructor? If so, that will be resolved in [lit-element/#606](https://github.com/Polymer/lit-element/pull/606) which will fix the bug I referenced above ([lit-element/#594](https://github.com/Polymer/lit-element/issues/594)) and should be included in the next lit-element release. Until then, you can call `this.requestUpdate()` in the constructor before awaiting `updateComplete` as a better workaround than `setTimeout`. – Kevin Schaaf Mar 14 '19 at 18:15
  • Note that [lit-element/#594](https://github.com/Polymer/lit-element/issues/594) has been fixed now. – Justin Fagnani Mar 17 '19 at 23:49
  • @KevinSchaaf Sorry for the delay to respond. Yes, you are right. Thanks for the workaround. – SONewbiee Mar 25 '19 at 10:35