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

This is how I'd like the process of creating a web component to be.

1) Manually create the dynamic elements that will change in the web component. pretend that every thing below is happening in the constructor of a web component:
this.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}`)});

2) Use a template literal to create a string where all dynamic parts are element-interpolation:
let soonToBeDOM = `<h1>See Below</h1>${div}<p>Click the sentence above to see alert.</p>`;

3) Now, feed this template literal to an HTML template:
let template =  document.createElement("template");
let dom = template.buildFromLiteral(soonToBeDOM);

At this point we've created actual DOM that contains the static and dynamic parts. And most importantly, the reference to this.div remains accessible throughout the life cycle of our web component instance. Any update method would be able to modify this.div (fast as possible) with a direct reference.

The template tag, never needs to be re-rendered. If you need to update something. You modify it directly.

This how I'd like it to work. hyperHTML and lit-html accomplish this same type of thing, but if that .buildFromLiteral method above worked natively, it would be even faster than they've accomplished. Because, in order for them to do it, they are having to replace interpolations with comment nodes before cloning the HTML template. Then, after cloning the template, they have to retrieve references for all those comment nodes, something like this:
```
const getCommentNodes = function(element)
{
 let treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_COMMENT);
 let commentNodes = [];
 while(treeWalker.nextNode()) {commentNodes.push(treeWalker.currentNode);}
 return commentNodes;
};
```
Lastly, they are having to replace each comment node with the actual element created within the web-component's constructor.

And they are not just doing element-interpolations either. They support string, fragments, promises interpolations.

The only thing I care about is element-interpolations. I'll separate static from dynamic myself. As long as I can reference the dynamic parts via element-reference. I've go all I need.

-- 
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-445062681