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

How to add a shadow dom to all elements with a certain class name

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

1
2
3

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

然后是此javascript：

1
2
3
4
5
6
7

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

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

您当然可以这样做，这里有几个问题。

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

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

1
2
3
4
5
6

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。