Hi Kiran, That's what template binding does by default. Adding the template contents inside the custom element is something that Polymer does for you.
If you just want to avoid using shadow DOM in your element, you can use Polymer and override the parseDeclaration method for your element. The parseDeclaration method creates the element's shadow DOM: https://github.com/Polymer/polymer/blob/master/src/instance/base.js#L273 Replacing shadowFromTemplate with lightFromTemplate in parseDeclaration gives you data-bound contents in the light DOM. However, you'll probably still have a dependency on the shadow DOM polyfill, and it sounds like that's what you're trying to avoid. If you want to see what Polymer is doing to instantiate the data-bound template contents, look at lightFromTemplate (in base.js) and instanceTemplate: https://github.com/Polymer/polymer/blob/master/src/instance/mdv.js#L24 There's a bunch of things that Polymer adds to the basic template binding, including adding support for Polymer expressions and the "template" attribute for legacy elements like table rows (where older browsers won't let you insert a template element). You may or may not want those features, but hopefully this'll get you started... Cheers, Arthur On Wed, Jan 7, 2015 at 10:39 PM, Kiran Rao <[email protected]> wrote: > I've been attempting to use polymer's TemplateBinding in conjunction with > a web component created using vanilla webcomponents-lite.js (i.e., no > Shadow DOM). > > The problem I face is that template binding does get "activated"; however > it creates the document fragment with the content of the template, > substitutes the bound values and places these as a *sibling of the > original template tag*. > This is not what I want. I want the content of the template to be > substituted with the values from the model; *and placed inside my custom > element*. > > Here's a complete sample: > > <!DOCTYPE html> > <html> > <head> > <script src="bower_components/webcomponentsjs/webcomponents-lite.js" > ></script> > <script src="bower_components/TemplateBinding/load.js"></script> > <template id="tmpl-x-greet" bind> > <div> > {{ greeting }}, {{audience }}! Welcome to web components. > </div> > </template> > </head> > <body> > <script> > var XGreet = Object.create(HTMLElement.prototype, { > createdCallback: { > value: function(){ > var t = document.getElementById('tmpl-x-greet'); > t.model = {greeting: "Hello", audience: "World"}; > Platform.performMicrotaskCheckpoint(); > > var clone = document.importNode(t.content, true); > this.appendChild(clone); > } > } > }); > document.registerElement('x-greet', {prototype: XGreet}); > </script> > <x-greet></x-greet> > </body> > </html> > > > > If you run this, you see this in the Chrome Dev Tools. As you see right > after the template tag we see the substituted elements. However, the > content of the custom element is unsubstituted. > > <head> > > > <!-- Other stuff here --> > > > <template id="tmpl-x-greet" bind=""> > <div> > {{ greeting }}, {{audience }}! Welcome to web components. > </div> > </template> > <div> > Hello, World! Welcome to web components. > </div> > </head> > <body> > <!-- Scripts etc here--> > <x-greet> > <div> > {{ greeting }}, {{audience }}! Welcome to web components. > </div> > </x-greet> > </body> > > > What am I doing wrong? > > Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/6bfdd9ea-d7e6-4190-8373-069472c357c7%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/6bfdd9ea-d7e6-4190-8373-069472c357c7%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CADSbU_zhcNOh5%3DK7E_5_hJ6BtmqH7WdmOZ_XT107-zfzDmnHsA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
