如何检查阴影中组件的（初始）渲染状态（不是更新状态）DOM

Question

在 question 之后，我想问一下在阴影 DOM 中检查组件初始渲染状态（不是更新状态）的适当方法。有没有类似document.readyState或promise的？

我也试过：

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

也失败了。

蒂亚

Answer 1

await this.updateComplete（或this.updateComplete.then(...)）是等待元素没有待处理的渲染工作的正确方法，例如查询元素的呈现状态，因此只要元素在运行 getItems.

之前连接到文档，您的代码通常应该可以正常工作

示例：https://jsbin.com/jiquhez/edit?html,console,output

但是请注意，如果您在连接元素之前等待 updateComplete 并且该元素没有设置会触发渲染的属性，那么 updateComplete 目前在第一次渲染之前解析。这可能被认为是意外错误，已在 lit-element/#594.

提交

请注意，您可能还想研究使用 firstUpdated 生命周期方法，具体取决于您的用例。这是一种您可以在 class 上实施的方法，以便在元素的第一个 update/render 周期之后执行 一次性 工作（例如，选择静态节点不会根据渲染而改变）。

示例：https://jsbin.com/limikas/edit?html,console,output

如何检查阴影中组件的（初始）渲染状态（不是更新状态）DOM

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

web-component

polymer

lit-element