Re: [w3c/webcomponents] Discussion: Templates that Don't Destroy Element References (#777)

Thanks. I think what we proposed would achieve something very close to what you want / are proposing. Fundamentally, there are two important pieces to the template API we’ve been discussing.

1. `TemplatePart` - It’s an object in DOM tree which keeps track of positions and be able to insert & replace any number of nodes at that location. This is basically a replacement for Comment node libraries like lit-html uses, and lets you very easily update the instance of a template.
2. Template parser - This is the thing that finds instances of `{{~}}` and replaces it with `TemplatePart`.

Let's say we have the HTML like this:

```html
<template id="myTemplate">
<h1>See Below</h1>{{content}}<p>Click the sentence above to see alert.</p>
</template>
```

Then we can do something like this (the exact shape & naming of API is not yet settled but so take it with a grain of salt; e.g. which properties exist where, etc... can change):

```js
const div = document.createElement("div");
div.textContent = "Click Here to See an Alert";
div.addEventListener('click', (event)=>{alert(`You click a div that contained this text: ${this.div.textContent}`)});
const instance = myTemplate.createInstance({content: div});
```

Here, `createInstance` uses the builtin template parser to find all instances of `{{~}}`, and creates an instance of `TemplatePart` for each. Then it assigned the "value" based on its name. The mapping / assignment behavior is completely customizable by defining your own *template processor* but that's what the default behavior would be.

Once you created an instance, you can insert that context into anywhere in the DOM:
```js
document.body.appendChild(instance.content);
```

Obviously, you can access & mutate `div` anyway you want:
```js
div.innerHTML = '<b>Click Here to See an Alert</b>';
```

In addition, the `TemplatePart` object which has been created for this instance can be updated. e.g.

```js
const b = document.createElement('b');
b.textContent = 'Open an alert';
instance.parts['content'].replace(b);
```


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/777#issuecomment-445088509