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);