Polymer: this.$.id returns undefined inside a dom-if template

[jmorille]

Description

Any element inside the template dom-if have the ids not reference with the map this.$. map

<template is="dom-if" if="[[displayNode]]">
       <h2 id="myNode">Bug [[prop1]]!</h2> 
</template>

The call of produce .this.$.myNode=undefined.

like the

   console.log("myButton is myNode is Not juste because is inside a template : ", this.$.myNode);

Any call of id outside the template is working.

Live Demo

http://jsbin.com/muquqesuqa/edit?html,console,output

1. Click on "Console Log ids" button
2. and look the console to see the message

"myButton is myNode is Not juste because is inside a template : this.$.myNode ==> undefined"

produce by the code

printNodeRef() {
    console.log("myButton is found : this.$.myButton ==> "+ this.$.myButton.tagName);
    console.log("myButton is myNode is Not juste because is inside a template : this.$.myNode ==> "+ this.$.myNode);
}

Steps to Reproduce

1. Create a template dom-if and add any element with an id like id="myNodeId"
2. The node this.$.myNodeId = undefined inside the template

Expected Results

this.$.myNodeId sould be the node reference

Actual Results

this.$.myNodeId is undefined

Browsers Affected

• [x] Chrome
• [x] Firefox
• [ ] Edge
• [ ] Safari 9
• [ ] Safari 8
• [x] IE 11

Versions

• Polymer: v2.0.2
• webcomponents: v1.0.2

[web-padawan]

You cannot refer to the nodes inside template tags like this, because this.$ is filled at the component initialization time and those templates are not yet stamped.

So, it works as intended. There is a polymer-linter issue on this topic.

[jay8t6]

do this.$$('#id')

[web-padawan]

this.$$ does not exist anymore when using polymer-element, you need legacy-element-mixin for that.

[jay8t6]

@web-padawan so just use this.root.querySelector('#id')?

[jmorille]

I used '''this.shadowRoot.querySelector('#id');''' and it is working for me.

It just feel strange that in the API it is not availaible in the this.$ map.

[web-padawan]

@jmorille the benefit of this.$ is that it only gets evaluated once at the initialization time, instead of querying DOM each time.

[TimvdLippe]

For future reference this limitation is listed in https://www.polymer-project.org/2.0/docs/devguide/dom-template#node-finding

Note: Nodes created dynamically using data binding (including those in dom-repeat and dom-if templates) are not added to the this.$ hash. The hash includes only statically created local DOM nodes (that is, the nodes defined in the element's outermost template).

Thanks @web-padawan for answering this question.

[yairopro]

Hi
Is there a reason why Polymer doesn't place a proxy in the $.
Like this:

this.$ = new Proxy(this.$, {
    get: ($, id) => $[id] || this.shadowRoot.getElementById(id),
    set: ($, id, element) => {
        $[id] = element;
        return true;
    }
});

[TimvdLippe]

That would be too expensive and Proxies are not supported in IE:
https://caniuse.com/#feat=proxy

On Tue, Oct 9, 2018 at 11:04 AM Yair [e-mail] wrote:

Hi
Is there a reason why Polymer doesn't place a proxy in the $.
Like this:

this.$ = new Proxy(this.$, {
get: ($, id) => $[id] || this.shadowRoot.getElementById(id),
set: ($, id, element) => {
$[id] = element;
return true;
}
});

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
https://github.com/Polymer/polymer/issues/4738#issuecomment-428134930,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFrDb6lJfvYfcQ8udfBCupLaJ_esXfiXks5ujHSZgaJpZM4ObcRJ
.

[romanzhivo]

I had this problem. I think it is because of <template is="dom-if"> is asynchronyos, and only after some timeout we can to get an element inside the template dom-if like this:

ready() {
    super.ready();
    this.async(()=>{
        const element = this.shadowRoot.querySelector('#myNode');
    }, 1)
}