title: Getting a node list by querySelectorAll()
body: <p>Given the following sample code:</p>
  
  <pre class="lang-js prettyprint-override"><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) =&gt; html`
                  &lt;div class="name"&gt;
                      ...
                  &lt;/div&gt;
              `)}        
          `;
      }
  }
  </code></pre>
  
  <p>What is the appropriate way to select all nodes with class "name"?</p>
  
  <p>I have tried the following ways, but <strong>failed</strong>; all times <code>nodesList</code> was <code>undefined</code>:</p>
  
  <ul>
  <li>Inside <code>constructor</code>:</li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>  this.nodesList = this.shadowRoot.querySelectorAll(".name");
  </code></pre>
  
  <ul>
  <li>Using:</li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>  firstUpdated(changedProperties) {
        return this.nodesList = this.shadowRoot.querySelectorAll(".name");
    }
  </code></pre>
  
  <ul>
  <li>Inside a custom function:</li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>  getNodesList() {
        let nodesList = this.shadowRoot.querySelectorAll(".name");
        ...
    }
  </code></pre>
  
  <p>I have also tried with:</p>
  
  <pre class="lang-js prettyprint-override"><code>connectedCallback() {
      super.connectedCallback();
      return this.nodesList = this.shadowRoot.querySelectorAll(".name");
  }
  </code></pre>
  
  <p>Looking forward reading the solution.</p>
  
  <p>Tia</p>