Получение списка узлов с помощью 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");
}

Ждем чтения решения.

Тиа

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