获取节点列表由querySelectorAll（）(Getting a node list by q

考虑下面的示例代码：

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

展望未来阅读的解决方案。

蒂亚

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

此外，如果您使用的打字稿，您可以使用query装饰：

@query('div')
myDiv;

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

文章来源: Getting a node list by querySelectorAll()