Question

我正在关注html5rocks shadow DOM tutorials，我想，＆＃34;如果我可以使用脚本为属于某个类的每个元素添加阴影dom，该怎么办？＆＃34;但它还没有奏效。我有以下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 dev工具时，我看到<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。

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

1 个答案: