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

期待阅读解决方案。

Tia

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

通过querySelectorAll（）

1 个答案: