通过 querySelectorAll() 获取节点列表答案

【问题标题】：Getting a node list by querySelectorAll()通过 querySelectorAll() 获取节点列表
【发布时间】：2019-07-19 01:13:22
【问题描述】：

给出以下示例代码：

import { LitElement, html, css } from 'lit-element';

class ItemsDisplay extends LitElement {

    static get styles() {...}
    static get properties {...}

    constructor () {
        super();
        ...
    }

    render {
        return html`
            ${this.items.map((item, index, array) => html`
                <div class="name">
                    ...
                </div>
            `)}        
        `;
    }
}

选择具有类“名称”的所有节点的适当方法是什么？

我尝试了以下方法，但失败； nodesList 一直是 undefined：

内constructor:

  this.nodesList = this.shadowRoot.querySelectorAll(".name");

使用：

  firstUpdated(changedProperties) {
      return this.nodesList = this.shadowRoot.querySelectorAll(".name");
  }

自定义函数内部：

  getNodesList() {
      let nodesList = this.shadowRoot.querySelectorAll(".name");
      ...
  }

我也尝试过：

connectedCallback() {
    super.connectedCallback();
    return this.nodesList = this.shadowRoot.querySelectorAll(".name");
}

期待阅读解决方案。

蒂亚

【问题讨论】：

这取决于您何时调用它。您必须确保 DOM 已添加到 shadowRoot，然后 querySelectorAll 才能工作。你能添加一个你试图调用它的例子吗？
我试图从constructor 调用它为this.getNodesList()，这是一个放在render 之后的函数。我认为lit-element 负责所有必要的工作，以便将新的element 自动添加到DOM 和/或将shadowDOM 添加到shadowRoot！。我想念什么？如何在“lit-element”中检查 shadowRoot 已准备好解析？蒂亚
我没有使用过 lit，但您可能需要在setTimeout 中拨打电话，以便浏览器有时间在内容真正可用之前进行实际渲染
您将无法查询constructor 中的DOM，甚至connectedCallback DOM 节点可能还没有准备好。您想对这些元素做什么？为什么需要这么早查询它们？
@Intervalia Tnks 为您提供帮助。也请看看这个questions。 setTimeout 会起作用，但这不是让我满意的方式！这是一个终极解决方案，但不是一个优雅的解决方案。 promise 可能是理想的选择。

标签： polymer web-component shadow-dom lit-element

【解决方案1】：

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

查询 DOM 节点的最佳位置是 firstUpdated() 生命周期回调，它在元素的 DOM 第一次更新后调用。你也不需要从firstUpdated返回它，你可以这样做：

  firstUpdated(changedProperties) {
    // Store a reference to the form element for easy access
    this.$someNode = this.shadowRoot.querySelector('div');

您可以在以下位置查看一些示例： https://stackblitz.com/edit/open-wc-lit-demos?file=02-intermediate%2F05-querying-dom.js

https://stackblitz.com/edit/open-wc-lit-demos?file=02-intermediate%2F01-first-updated.js

另外，如果你使用 TypeScript，你可以使用 query 装饰器：

@query('div')
myDiv;

【讨论】：

感谢您的回复。我已经看过所有这些示例。我也使用过firstUpdated()，但失败了。 changedProperties 是不是函数中的可选参数？在01-first-updated.js 示例中，该参数存在但从未使用/声明过。我仍然阅读文档并一遍又一遍地查看示例！