1

我正在关注html5rocks shadow DOM tutorials，我想，“如果我可以使用脚本为属于某个类的每个元素添加一个 shadow 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 元素，这种模式都会继续，只有最后一个标签的影子根有任何内容。我的脚本有问题吗？

4

1 回答 1

2

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

首先你应该.remove()在循环之外的模板上做（一旦你完成了它）。

其次将该元素从模板移动到影子 DOM。由于您向后执行循环，因此它首先被移动到 Jim，然后不再可供 Bob 使用。您需要在每个阶段执行的操作并附加克隆，如下所示：appendChild 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。

于 2014-04-21T06:22:48.520 回答