Polymer 2 queryselector doesn't work

Question

I try to add an eventlistener to some dynamically created elements, but i cannot target them.

//here is how I try to access it
_buildTable(data)
{
    this.$.spinner.style.display = 'none';
    this.tableHead = Object.keys(data[0]);
    this.tableData = data;
    this._test();//It is called theorically after that the data has been filled
}
_test()
{   
    var link = this.shadowRoot.querySelectorAll(".link");
    //var link = Polymer.dom(this.root).querySelectorAll(".link"); //tried this but i think it is Polymer 1.x style
    //var link = document.querySelectorAll(".link"); // I tried this
    
    console.log(link);
}

<!-- Here is the HTML dom-repeat -->
<tbody>
    <template is="dom-repeat" items="{{tableData}}" as="data">
        <tr>
            <td class="link">{{data.id_Mission}}</td>
            <td>{{data.nom}}</td>
            <td>{{data.resume}}</td>
        </tr>
    </template>
  </tbody>

What am I missing,

Have a nice evening/night/day everyone

Answer 1

You are calling _test after tableData is saved, but the elements don't get stamped into the page, as the execution thread goes to the method you are calling, and will actually render them when it can. To confirm if this is the issue, try "sending to the background" your method call, have it called with a delay, but "as soon as possible", but using setTimeout.

So your method would be:

  _buildTable(data)
  {
    this.$.spinner.style.display = 'none';
    this.tableHead = Object.keys(data[0]);
    this.tableData = data;
    setTimeout(() => {
      this._test();
    });
  }