Understanding Polymer data-binding and HTML tags

Question

I'm new to Polymer and while testing data-binding, I discover that I have to encapsulate double-mustache expressions within HTML tags (for example <span>{{var}}</span>).

If not, variable is simply not expanded and printed as is.

An exemple (from Polymer Quick Tour), with a line more to show this behaviour. You can also find it on Plunker.

<dom-module id="name-tag">
  <template>

    <!-- Will print : This is {{owner}}'s name-tag element. -->
    This is {{owner}}'s name-tag element.<br />

    <!-- Will print : This is Daniel's name-tag element. -->
    This is <b>{{owner}}</b>'s name-tag element.
  </template>
</dom-module>

<script>
Polymer({
  is: "name-tag",
  ready: function() {
    // set this element's owner property
    this.owner = "Daniel";
  }
});
</script>

Did I miss something on the documentation, or is this some kind of bug ?

To the ones that reads this question today
This behavior seems to have been fixed, in the example on Plunkr, there is no problem anymore.

Answer 1

According to the docs :

The binding annotation must currently span the entire content of the tag.

This means you currently have to wrap your bindings in a tag as you did in this example:

This is <b>{{owner}}</b>'s name-tag element.

I expect in the future this will be changed so that you don't have to wrap bindings in a tag.