Getting a node list by querySelectorAll()

问题

Given the following sample code:

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

What is the appropriate way to select all nodes with class "name"?

I have tried the following ways, but failed; all times nodesList was undefined:

Inside constructor:

  this.nodesList = this.shadowRoot.querySelectorAll(".name");

Using:

  firstUpdated(changedProperties) {
      return this.nodesList = this.shadowRoot.querySelectorAll(".name");
  }

Inside a custom function:

  getNodesList() {
      let nodesList = this.shadowRoot.querySelectorAll(".name");
      ...
  }

I have also tried with:

connectedCallback() {
    super.connectedCallback();
    return this.nodesList = this.shadowRoot.querySelectorAll(".name");
}

Looking forward reading the solution.

Tia

回答1:

You shouldn't try to access DOM node in the constructor, because they won't be available yet.

The best place to query DOM nodes is the firstUpdated() lifecycle callback, which is called after the first time your element's DOM has been updated. You also don't need to return it from firstUpdated, you can just do something like:

  firstUpdated(changedProperties) {
    // Store a reference to the form element for easy access
    this.$someNode = this.shadowRoot.querySelector('div');

You can see some examples of this over at: 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

Additionally, if you're using TypeScript, you can use the query decorator:

@query('div')
myDiv;

More info: https://github.com/Polymer/lit-element/blob/master/src/test/lib/decorators_test.ts#L326

来源：https://stackoverflow.com/questions/54869489/getting-a-node-list-by-queryselectorall

标签

polymer

web-component

shadow-dom

lit-element