"Vanilla" web components plus polymer TemplateBinding

Kiran Rao

unread,

Jan 8, 2015, 1:39:54 AM1/8/15

to polym...@googlegroups.com

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?

Arthur Evans

unread,

Jan 8, 2015, 12:00:27 PM1/8/15

to Kiran Rao, polymer-dev

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

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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/6bfdd9ea-d7e6-4190-8373-069472c357c7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Kiran Rao

unread,

Jan 9, 2015, 12:28:07 AM1/9/15

to polym...@googlegroups.com, techie....@gmail.com

Thanks for the explanation, Arthur. That clarified things a bit.

My original intention was to arrive at the minimum set of dependencies in order to get web components and basic templating (as in the template element with handle-bars-like mustache placeholders in it) working together. I am not very particular about having two-way binding. All I need is some handle-bars like templates.

It is beginning to look like using TemplateBinding might be overkill for this. On the other hand, it is easiest to just use polymer since it has everything I need.

I'll re-visit my requirements (or better, wait for polymer 0.8!). Thanks.

Tomek W

unread,

Jan 12, 2015, 10:33:23 AM1/12/15

to polym...@googlegroups.com, techie....@gmail.com

Kiran, just note that TempalteBinding may not work out of the box in 0.8.

It currently does not work with 0.8-preview: https://github.com/Polymer/polymer/issues/966, and I'm afraid binding features will be limited to <polymer-element>`s only https://groups.google.com/forum/#!topic/polymer-dev/OP8C4-LR_0E

We have started small fan-page ;) of TempalteBinding http://templatebinding.org/ to gather some attention, and in worst case push it forward, if Polymer is going to abandon it.

Kiran Rao

unread,

Jan 13, 2015, 12:00:40 AM1/13/15

to polym...@googlegroups.com, techie....@gmail.com

Tomek,

My motivation for looking into TemplateBinding was to use "vanilla" web components in combination with some sort of data binding. And I wanted to do this without having to incur the weight of a full-blown polymer layer.

Having said that, if 0.8 makes mix and match possible and if the cost incurred in using a subset of polymer is low, I might end up leaning towards that approach. Will have to wait and watch.

Reply all

Reply to author

Forward