Skip to content

Loading…

Template stamping doesn't work in custom element light DOM #2010

Closed
nomego opened this Issue · 3 comments

2 participants

@nomego

Considering the following code:

var appendTo = this.$.myCustomElement,
  t = document.createElement('template', 'dom-bind'),
  span = document.createElement('span');
span.innerHTML = '{{hello}}';
t.content.appendChild(span);
t.hello = 'hey';

Appending this to the light DOM won't work:

Polymer.dom(appendTo).appendChild(t);

This will only render the template tag with the content within and data-binding placeholders emptied.
The dom-change event will actually fire and informs me that the attached() callback stuff of the dom-bind element actually have been run.
But stamping fails and moving the content outside the template never happens.
Tries with dom-template and manual stamp() also failed.

It actually needs to be in the local DOM:

Polymer.dom(appendTo.root).appendChild(t);

Is this a bug or by design?
Could not find any documentation on this.

@sorvell sorvell added the p1 label
@sorvell sorvell self-assigned this
@sorvell
Owner

I can confirm this issue. Here's a simple test and a workaround:

http://jsbin.com/vagugufowi/1/edit (see the //workaround comment)

We'll try to get this fixed by the next release.

@sorvell
Owner

Related to #1818.

@nomego

Thank you, and thanks for the workaround.
It would be semantically more accurate to append to the light DOM with consideration of the content.
Also, it's good if this process works the same way for native and custom elements.

@sorvell sorvell closed this issue from a commit
@sorvell sorvell Fixes #2010, fixes #1818: Shady dom mutations which trigger additiona…
…l mutations are now successfully enqueued.
a26247b
@sorvell sorvell closed this in a26247b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.