javascript - Creating a shadow DOM with template binding -

javascript - Creating a shadow DOM with template binding -

context.

i trying create web components using platform facilities in webcomponents.js not in polymer layer (polymer.js). typical examples simple , work fine:

<div id="wc-1"> <span id="text">view</span> </div> <template id="template"> <div> <h2> <content select="#text"> default </content> 1 </h2> </div> </template> <script> document.addeventlistener('domcontentloaded', function () { function createwc (host) { var host = document.queryselector (host); var template = document.queryselector ('#template'); var root = host.createshadowroot (); root.appendchild (template.content.clonenode (true)); } var wc = createwc ('#wc-1'); }); </script>

problem.

extending illustration above template bindings , typical activating script (1), undesired outcomes obtained. next code results in 2 copies of template content, 1 due activating code , united nations resolved data-bindings within shadow dom. how can accomplish activate template , include contents within shadow dom?

<div id="wc-1"> <span id="text">view</span> </div> <template id="template" bind="{{data}}"> <div class="red"> <h2> <content select="#text"> default </content> 1 </h2> created @{{now}} </div> </template> <script> document.addeventlistener('domcontentloaded', function () { function createwc (host) { var host = document.queryselector (host); var template = document.queryselector ('#template'); var root = host.createshadowroot (); template.model = { // (1) info : { : new date() } }; root.appendchild (template.content.clonenode (true)); } var wc = createwc ('#wc-1'); }); </script>

question.

i suppose have error in activating section. can help me solve problem? in advance. code can find @ http://jsbin.com/tiniyu/5/edit

you're linking old version of platform.js (0.3.4). looks in latest version of platform.js (0.4.2) template binding has been removed (the same should true webcomponents.js v0.4.2).

here's illustration using master branch of platform polymer site: http://jsbin.com/pejoga/2/edit

javascript data-binding polymer