Polymer 通过querySelectorAll（）获取节点列表

给定以下示例代码：

从'lit element'导入{LitElement，html，css}；
类ItemsDisplay扩展了LitElement{
静态获取样式（）{…}
静态获取属性{…}
构造函数（）{
超级（）；
...
}
渲染{
返回html`
${this.items.map（（项、索引、数组）=>html`
...
`)}        
`;
}
}

选择类为“name”的所有节点的适当方式是什么

我试过以下方法，但失败了；所有时间

节点列表

都是

未定义的

：

• 内部

  构造函数

  ：

this.nodesList=this.shadowRoot.queryselectoral（“.name”）；

• 使用：

firstUpdated（更改属性）{
返回this.nodesList=this.shadowRoot.querySelectorAll（“.name”）；
}

• 在自定义函数中：

getNodeList（）{
让nodesList=this.shadowRoot.queryselectoral（“.name”）；
...
}

我也尝试过：

connectedCallback（）{
super.connectedCallback（）；
返回this.nodesList=this.shadowRoot.querySelectorAll（“.name”）；
}

期待阅读解决方案

---

Tia

您不应该尝试访问构造函数中的DOM节点，因为它们还不可用

查询DOM节点的最佳位置是

firstUpdated（）

生命周期回调，该回调在元素的DOM第一次更新后调用。您也不需要从

firstUpdated

返回它，您可以执行以下操作：

firstUpdated（更改属性）{
//存储对表单元素的引用以便于访问
this.$someNode=this.shadowRoot.querySelector（'div'）；

您可以在以下位置看到一些示例：

此外，如果您使用的是TypeScript，则可以使用

查询

装饰器：

@query('div')
myDiv;

---

更多信息：

这取决于您何时调用它。您必须确保在

querySelectorAll

工作之前，DOM已添加到

shadowRoot

。您可以添加一个您尝试调用它的示例吗？我正在尝试从

构造函数调用它，作为
this.getNodeList（）
，一个放置在
渲染
之后的函数。我认为
lit element
负责所有必要的工作，以便自动将新的
元素
添加到DOM和/或将shadowDOM添加到shadowRoot！。我遗漏了什么？如何在“lit element”中检查shadowRoot是否已准备好进行解析？Tia我没有使用lit，但是您可能需要在
setTimeout
中进行调用，以便在内容真正可用之前允许浏览器有时间进行实际渲染。您将无法在
构造函数中查询DOM，甚至在
connectedCallback
中，DOM节点可能还没有准备好。什么你是在试图处理这些元素，为什么要这么早就查询它们？@Intervalia Tnks谢谢你的帮助。请也看看这个。
setTimeout
会起作用，但这不是一个让我满意的方法！这是一个最终的解决方案，但不是一个优雅的解决方案。
承诺
可能是理想的。谢谢你的回复。我是我看过所有这些示例。我也使用了
firstUpdated（）
，但失败了。
changedProperties
是否是函数中的可选参数？在
01 first updated.js
示例中，该参数存在，但从未使用/声明过。我仍然反复阅读文档并查看示例！