How do I share an element between two custom elements?

[balu...@gmail.com]

Essentially I need to accomplish this: http://pastebin.com/ZAjXV4Hv — but it doesn't work

As I'm trying to share a video element from one custom element, to another custom element which will then apply a black and white filter to it generating data images.

[Benjamin Howe]

If I understand what you're trying to do, though, I'm not sure what you are after is possible.  Any element can only exist in one place on the tree, so you can't hand one element to two different components and have them both append it inside themselves.

As a side note, it looks like on your "test-b" element, you're invoking Polymer with the name of your other component, "test-a".

-Benjamin

[Eric Bidelman]

Possible! http://jsbin.com/OtiweSut/3/edit

As Ben pointed out, I corrected the dupe names and removed the append/remove logic.

The other update is to treat <test-a> as the source of truth for the shared element. When <test-b> needs a handle, it gets it through data-binding but the original element remains part of the <test-a>'s shadow dom.

Another thing to consider is making |el| settable from an id:

elChanged: function() {

  if (typeof this.el === 'string') {

    this.el = document.getElementById(this.el);

  }

  ...

}

<video id="myvideo" src="..."></video>

<test-b el="myvideo"></test-b>

This makes your component useful outside the world of data-binding. Standalone, reusable components are happy components!

BTW, if it's not important that <test-a> publish the |el| property as an attribute, you can do the following:

<test-a id="testa"></test-a>

<test-b el="{{$.testa.el}}"></test-b>

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/5f9191fc-36df-4645-b868-17212d638d52%40googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.