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.
For more options, visit https://groups.google.com/d/optout.
