Invalid reference to 'this' when extending an object

[Leandro Cruz]

Hi all,

I have a custom element A which is extended by element B. Problem is that the 'this' reference in A points to B, not A, which makes a query in A's shadowRoot fail when extended by B.

The attachment index.html provides an example.

After loading the example, execute the following code in DevTools:

var sub = document.querySelector('sub-object');

var base = document.querySelector('base-object');

sub.flag = true;

base.flag = true;

sub.byId('flaged'); // fails because the this.shadowRoot points to sub's, not base.

base.byId('flaged'); // works

Any ideas?

[Arthur Evans]

Hi Leandro,

This kind of question is probably best asked over on stack overflow, using the polymer tag. 

I think this section might provide the pattern you're looking for: 

https://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding

Cheers,

Arthur

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/c3d44e16-06c8-4f33-9856-20b7ed0c0fcf%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Leandro Cruz]

Hi Arthur,

Automatic node finding will not help is this case because the node I want is not static, hence not added to 'this.$'. The only way I know to get a reference to the node is using this.shadowRoot.querySelector() or this.shadowRoot.getElementById().

It would be nice if the 'this.$' was updated upon a conditional rendering of a template that would include the element in 'this.$'.

--

Leandro Rodrigo Saad Cruz

[Eric Bidelman]

IIRC, this is on one case where this.shadowRoot fails and instead, use automatic node finding.

On Tue, Oct 21, 2014 at 1:46 PM, Leandro Cruz <leandr...@gmail.com> wrote:

Hi Arthur,

Automatic node finding will not help is this case because the node I want is not static, hence not added to 'this.$'. The only way I know to get a reference to the node is using this.shadowRoot.querySelector() or this.shadowRoot.getElementById().

It would be nice if the 'this.$' was updated upon a conditional rendering of a template that would include the element in 'this.$'.

Can, you can create a wrapper and query from that?

<div id="wrapper">

  ...

</div>

this.$.wrapper.querySelector('#youelement')

 

--

Leandro Rodrigo Saad Cruz

On Tue, Oct 21, 2014 at 4:33 PM, Arthur Evans <art...@google.com> wrote:

Hi Leandro,

This kind of question is probably best asked over on stack overflow, using the polymer tag. 

I think this section might provide the pattern you're looking for: 

https://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding

Cheers,

Arthur

On Tue, Oct 21, 2014 at 11:07 AM, Leandro Cruz <leandr...@gmail.com> wrote:

Hi all,

I have a custom element A which is extended by element B. Problem is that the 'this' reference in A points to B, not A, which makes a query in A's shadowRoot fail when extended by B.

The attachment index.html provides an example.

After loading the example, execute the following code in DevTools:

var sub = document.querySelector('sub-object');

var base = document.querySelector('base-object');

sub.flag = true;

base.flag = true;

sub.byId('flaged'); // fails because the this.shadowRoot points to sub's, not base.

base.byId('flaged'); // works

Any ideas?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CA%2BDnGt6vKQtFmVwR2jRcboqi8rc0JQJAE%2BhaD3m6Hs6hLK_Cvw%40mail.gmail.com.

[cletusw]

In that case, the generally accepted solution is to place an ID on a static ancestor node and use this.$.ancestorId.querySelector('whatever'). If you really, really, really need to query directly from the shadow root, there's an undocumented, Polymer-specific shadowRoots (note the 's') property (https://github.com/Polymer/docs/issues/254) you can use with your element name to get the shadowRoot for your specific class even if there are subclasses.