Using template defined in light dom inside a Polymer element

html, javascript, polymer, web-component

Solution

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

Problem

I'm trying to get a template moved from the DOM to inside the element. Here is my elements: ``` <link rel="import" href="../polymer/polymer.html"> <link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html"> <polymer-element name="bt-sortable-list" attributes="drag name list"> <template> BOOM <template binding ref="itemTemplate" repeat="{{list}}" id="repeatTemplate"> </template> <template id="itemTemplate"> </template> </template> <script> Polymer('bt-sortable-list', { ready: function() { var div = document.createElement('div'); contentStr = this.trim(innerHTML); var parsed = markdown.toHTML(content); this.$.itemTemplate.innerHTML = parsed; this.list = [{name: 'Item 1', id: 'item1'}, {name: 'Item 2', id: 'item2'}, {name: 'Item 3', id: 'item3'}]; this.$.repeatTemplate.model = this.list; } }); </script> </polymer-element> ``` And here is my html file: ``` <!doctype html> <html> <head> <script src="/platform/platform.js"></script> <link rel="import" href="/bt-sortable-list/bt-sortable-list.html"> </head> <body> <h3>Sortable List</h3> <bt-sortable-list> <template Name {{name}} </template> </bt-sortable-list> </body> </html> ``` I can't seem to get the template in test.html to be used inside of the bt-sortable-list custom element. The general idea is that the custom element will handle the list and other things, while letting the html that is using the element to define how a list element will be displayed. I've tried programmatically adding the template as shown. I've also tried not having the template under the bt-sortable-list element. I've also tried using a content element to get the templates contents in test.html. Any suggestions would be greatly appreciated.

Original source

Related problems