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

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

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

期待阅读解决方案。

蒂亚

score 5 · Accepted Answer

您不应该尝试在构造函数中访问 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

polymer - 通过 querySelectorAll() 获取节点列表

1 回答 1

Related

Reference