How to check the (initial) render state (not the update state) of a component in shadow DOM

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/54872823/how-to-check-the-initial-render-state-not-the-update-state-of-a-component-in