Re: [w3c/webcomponents] [Template Instantiation] Layering and additional use cases (#747)

In the layering described here, how would the wiring of event listeners be accommodated? Being able to update Shadow DOM in response to component state changes is one reason we currently have to manually scan a cloned fragment to reacquire nodes of interest — the other reason we do that is to find nodes in the cloned fragment so we can listen to events they raise.

During the Tokyo F2F, this notion of reacquiring nodes in a cloned fragment was touched upon several times. Perhaps that's a fundamental primitive, even more so than the notion of updatable parts. In other words, I have a template and a set of interesting nodes inside that template. When I clone the template, I want to find the corresponding set of interesting nodes in the resulting fragment.

Simple use case: I have an expand/collapse component whose template includes a button that should toggle the expand/collapse state of the component. When I clone the template, I want to find that button inside the cloned fragment so that I can listen to the button's `click` events. That seems related to, but somewhat different than, the notion of subsequently updating the nodes in the cloned fragment.

In our experiments, we found ourselves looking for an efficient way to find nodes in a cloned fragment that correspond to nodes in the original template. One simple technique is to calculate the [address of a node](https://github.com/ComponentKitchen/template-instantiation/blob/master/src/nodeAddress.js) in the template as a set of indices into the template tree, then apply that same address to the cloned fragment to acquire the corresponding node. I believe @cdata and @justinfagnani have used a similar technique.

Perhaps such a low-level facility should be part of the proposed Level 1, or an even more primitive Level 0. That is, a developer could mark the nodes in the template (or `DocumentFragment`) that they care about, and the enhanced `cloneWithXXX` operation would afford references to the location of those nodes in the resulting fragment. Those references would be used by the cloned parts, but could also be used directly — among other things, for listening to events.

-- 
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/747#issuecomment-374685283