this.shadowRoot.querySelector('#'+idname) not work when i use dom-repeat

[hmleo]

hello:
i encountered a problem when i user dom-repeat in my code,as below:
<template is="dom-repeat" items="{{tabs}}">
<span id="{{item.id}}">{{item.name}}</span>
</template>

and
static get properties() {
return {tabs:{type: Array,value() {return [{ id:"style_ctrl_id",name:"style",active:'active',},{id:"data_ctrl_id",name:"data",active:'',} ];}} };}

and
connectedCallback() {
super.connectedCallback();
console.log(this.shadowRoot.querySelector('#'+this.tabs[0].id));
}`

the problem is : print null on the console panel,
i can't find the reason , thanks !

[web-padawan]

The dom-repeat stamps its children asynchrounously, so you should wait until next render:

connectedCallback() {
  super.connectedCallback();
  Polymer.RenderStatus.afterNextRender(this, () => {
    console.log(this.shadowRoot.querySelector('#' + this.tabs[0].id));  
  });
}

You can also invoke the render method on the dom-repeat to force rendering, but that might be not a good idea in terms of performance.

[hmleo]

it works ,thank you !

[hmleo]

i have another question, as the code that i just commented,i can bind a id_name({{item.id}} ) to the element's attribute id inside dom-repeat and it actually worked.But when i wanted to bind the class_name to the element's attribute class inside dom-repeat and it did not work,why? thank you for reply!

[web-padawan]

Some of the native attributes, including class, require special binding notation: class$="[[something]]", see https://www.polymer-project.org/2.0/docs/devguide/data-binding#native-binding

[hmleo]

thank you very much

[web-padawan]

In the future, it is better to ask such questions in the Slack channel. I think you can close this issue now.

[TimvdLippe]

Thanks @web-padawan for responding so quickly 😄 Closing per #5144 (comment)

[hmleo]

thanks