Using template defined in light dom inside a Polymer element

Question

I\'m trying to get a template moved from the DOM to inside the element.

Here is my elements:

Answer 1

To use the (light dom) content of a custom element you need to include an insertion point in your element (<content>):

http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees

However, insertion points are purely placeholders for rendering nodes in the shadow DOM. What you're after is a bit different because it's using Polymer's data binding features to bridge the light dom world outside of your Polymer element, with the shadow dom world inside of it.

I was able to get things working by dynamically creating the <template> in ready() and using ref to reference it:

var t = document.createElement('template');
t.id = 'itemTemplate';
t.innerHTML = this.innerHTML;

this.list = [{name: 'Item 1', id: 'item1'},
             {name: 'Item 2', id: 'item2'},
             {name: 'Item 3', id: 'item3'}];

this.shadowRoot.appendChild(t);

Demo: http://jsbin.com/IVodePuS/3/edit