You can certainly do this, you have a couple of problems here.
First you should do .remove()
on the template outside of the loop (once you're finished with it).
Second appendChild
moves that element from the template to the shadow DOM. Since you do the loop backwards it gets moved to Jim first and then is no longer available for Bob. What you need to do in cloneNode
at each stage and append the clone, like this:
for (var i = nameTags.length - 1; i >= 0; i--) {
var shadow = nameTags[i].webkitCreateShadowRoot();
var clone = template.content.cloneNode(true);
shadow.appendChild(clone);
};
template.remove();
Here's a working jsFiddle.