javascript - 如何向具有特定类名的所有元素添加影子 dom

Question

我正在关注 html5rocks shadow DOM tutorials ，然后我想，“如果我可以使用脚本为属于某个类的每个元素添加影子 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 中做什么在每个阶段并附加克隆，如下所示:

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 .