通过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