如何为具有特定类名的所有元素添加阴影dom

Question

我正在关注html5rocks的影子DOM教程 ，我想：“如果我可以使用脚本将影子dom添加到属于类的每个元素上，该怎么办。” 但是它没有起作用。 我有以下html：

<div class="nameTag">Bob</div>
<div class="nameTag">Jim</div>
<template id="name-tag">...</template>

然后这个javascript：

<script>
   var nameTags = document.querySelectorAll('.nameTag');
   var template = document.querySelector('template#name-tag');
   for (var i = nameTags.length - 1; i >= 0; i--) {
      var shadow = nameTags[i].webkitCreateShadowRoot();
      shadow.appendChild(template.content);
      template.remove();
   };
</script>

此代码仅显示名称为Jim的模板。 查看chrome开发工具后，我看到<div class="nameTag">Bob</div>处有一个影子根，但由于某种原因它是空的。 无论我有多少.nameTag元素，这种模式都将继续，只有最后一个标签的影子根具有任何内容。 我的脚本有问题吗？

Answer 1

您当然可以做到这一点，这里有几个问题。

首先，您应该在循环外部的模板上执行.remove() （一旦完成）。

第二个appendChild将该元素从模板移动到影子DOM。 由于您向后进行循环，因此它将首先移至Jim，然后Bob不再可用。 您需要在每个阶段在cloneNode中执行的cloneNode并追加克隆，如下所示：

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();

这是一个工作的jsFiddle 。