cloning from a temlate

[Jelte Liebrand]

I'm slightly puzzled, and no doubt I'm doing something silly here, but I have created my own element "my-element" which has an additional function "foo()". When I place one of these guys declaratively on my page, it works fine, eg:

<my-element></my-element>

This element is an instance of MyElement and it has the function foo().

However, if I place it (declaratively) inside a template, which I then later clone in to my document, then the element does not appear to be upgraded and does not have my foo() function. eg:

in html:

<template id="t">

  <my-element></my-element>

</template>

in javascript:

var t = document.getElementById('t');

document.body.appendChild(t.content.cloneNode(true));

The element does end up in my DOM, but it just doesn't have the foo() function nor is it an actual instanceof MyElement.

Am I missing something obvious here?

/Cheers,

Jelte

[Rob Dodson]

try this instead:

document.body.appendChild(document.importNode(t.content, true));

does that work for you?

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/31060fba-4113-4b06-ad80-32e5232716b8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jelte Liebrand]

Yep! That worked; Should cloneNode not have also worked?

Jelte Liebrand | Software Engineer | je...@google.com | +1 (415) 318 6507

[Rob Dodson]

Not in this case. It's kind of confusing and I had to have it explained to me :)

Here's why cloneNode doesn't work in this case, but importNode does:

1. templates make their contents inert by putting them in a special document

2. that special document has no custom elements registered

3. moving an element between documents does not change its identity, vis-a-vis custom elements

4. cloneNode + appending to a document creates it in the old document then moves it to the new one, while importNode creates it in the new document

[Jelte Liebrand]

I kinda figured that reading the documentation on import and adoptNode APIs. As you say, somewhat confusing that the appendChild doesn't change ownership, but you learn something new every day; this works for me so I'm all good

Thanks!

Jelte Liebrand | Software Engineer | je...@google.com | +1 (415) 318 6507

[Adam Klein]

To be slightly more exact, appendChild does change the ownership (i.e., foo.ownerDocument will return wherever you appended it) but has no effect on the type of the element. To see why you might want to avoid changing type when adopting, consider an element born in an <iframe> that gets moved into the main document. You probably wouldn't want to go back through the lifecycle just because it moved to a new document...

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAOOg8mpP2T4OJmGbb-0Bo-g_aBybfdY-brEf%2BxxQzy1J3gB-jg%40mail.gmail.com.