通过querySelectorAll（）获取节点列表

Question

给出以下示例代码：

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>
            `)}        
        `;
    }
}

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

我尝试了以下方法，但失败了;所有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");
}

期待阅读解决方案。

射线

Answer 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;

更多信息：https://github.com/Polymer/lit-element/blob/master/src/test/lib/decorators_test.ts#L326