首页 文章

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

提问于
浏览 次
1

我跟着html5rocks shadow DOM tutorials，我想，"what if I could use a script to add a shadow dom to every element belonging to a class."但它没有奏效 . 我有以下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元素，只有最后一个标签的影子根有任何内容，这种模式仍然存在 . 我的脚本有问题吗？

javascript html5 google-chrome webkit shadow-dom

1 回答

  • 2

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

    首先，你应该在循环外的模板上做 .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 .

    回复于

相关问题