Lit-html: bindings in <template> not working
const who = 'world';
render(html`<template id="res">hello ${who}</template>`, document.body);
// `hello {{}}` instead of `hello world` :(
console.log(document.getElementById('res').innerHTML);
valdrinkoshi
All 5 comments
Oh, interesting...
I suppose we have to walk into nested template contents when preparing a template.
justinfagnani
on 11 Aug 2017
@valdrinkoshi #50 starts us on the path to being able to fix this. Because it does a recursive walk on the template, rather than using a TreeWalker, we can choose to special-case s and recurse into them.
How critical is this?
justinfagnani
on 13 Aug 2017
The fact that we're using a template literal with a template element within it it's a bit strange, I know, but nevertheless I think it's important we support it for inter-op.
I've been updating iron-overlay to use lit-html.
<iron-overlay> gets a template via distribution, stamps it and hosts it in a stacking-context-safe node (e.g. <body>). It relies on <template> so that the overlay content gets created and appended only when needed.
Another similar example is <iron-list>, which gets the item template via distribution.
If I want to use <iron-list>, I have to pass a template:
``js
const items = ['one', 'two'];
const userName = 'Val';
const templateResult = html
`;
valdrinkoshi
on 14 Aug 2017
Well, with #50 I think we can do this, but it might be a bit confusing to deal with two separate data-binding systems. The lit-html bindings are going to change the <template>'s content. You have that right above, but I wonder how many would get that distinction immediately.
It's be nice to have an iron-list that took something even a bit more abstract than template elements, maybe a function that produces DOM (something like (item, index) => Node).
justinfagnani
on 14 Aug 2017
What about event binding?
<iron-list items="${items}">
<template>
<div on-click="${(e) => this.onItemClick(e)}">
[[item]]
</div>
</template>
</iron-list>
Does not work in #50
mkorenko
on 19 Jun 2018
Related issues
kaaninel
路
3Comments
Christian24
路
4Comments
AndyOGo
路
3Comments
justinfagnani
路
4Comments
depeele
路
3Comments
Most helpful comment
Well, with #50 I think we can do this, but it might be a bit confusing to deal with two separate data-binding systems. The lit-html bindings are going to change the
<template>'s content. You have that right above, but I wonder how many would get that distinction immediately.It's be nice to have an iron-list that took something even a bit more abstract than template elements, maybe a function that produces DOM (something like
(item, index) => Node).