Referencing parent element from within nested polymer element.

2,776 views
Skip to first unread message

Luke Pacholski

unread,
Nov 26, 2013, 4:45:31 PM11/26/13
to polym...@googlegroups.com
Here's my setup...

<polymer-element name="el-one">
  <template>
    <el-two></el-two>
  </template>
</polymer-element>

When I ask <el-two> for its parent (this.parentNode) inside of it's ready or enteredView method, it comes back as a "document-fragment".
The only way I've found to successfully grab the parent element, <el-one>, from inside of <el-two> is with a setTimeout of 100s and then asking for this.impl.parentNode.. which seems bad.

What's the proper way to grab the parent in this case?

Daniel Freedman

unread,
Nov 26, 2013, 5:11:37 PM11/26/13
to Luke Pacholski, polymer-dev
<el-two>'s parentNode is not <el-one>, but the shadowroot of <el-one>. You can get to <el-one> via <el-two>.parentNode.host, though I'm not sure why you want to do that.

Can you share your use case? There might be a different method that would be cleaner.


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.
For more options, visit https://groups.google.com/groups/opt_out.

Luke Pacholski

unread,
Nov 26, 2013, 5:32:42 PM11/26/13
to polym...@googlegroups.com, Luke Pacholski
Thanks, that did the trick!

I was trying to add an eventListener on <el-two>'s parent - but didn't know how to reference it properly.

Günter Zöchbauer

unread,
Nov 27, 2013, 7:41:49 AM11/27/13
to polym...@googlegroups.com, Luke Pacholski
I run into this a while ago while porting polymer-flex-layout to Dart.
(in polymer-flex-layout a custom element adds a class to the parent)

In Dart I had the problem that the parent was not yet properly assigned when my callback method in the child was called so I couldn't access the parent.
A discussion on StackOverflow led to the point of view that this is breaking encapsulation and should be avoided. 
Maybe this is to strict. Maybe it's ok if the only assumption is, that the parent is a HtmlElement.

In my case I created a custom element that I used as parent and replaced the div that was used before and let it listen for events from the child if it should set a class.
In Luke's case the parent could probably be modified to call a method on the child or change an attribute.

What do you think about it?


Reply all
Reply to author
Forward
0 new messages