无法填充阴影DOM（下面的教程）

我在播放html5rocks的Shadow DOM 101 tutorial。我使用Chrome 25.0.1364.172和当我尝试将appendChild添加到Shadow DOM根目录（如教程中所示）时，我得到一个 Uncaught Error: NotFoundError: DOM Exception 8。我想我错过了一些明显的东西，但我无法弄清楚什么。下面是代码：无法填充阴影DOM（下面的教程）

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Test the shadow dom</title> 

    </head> 
    <body> 
     <div id="myName">Alon</div> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script id="myNameTemplate" type="text/x-tmpl-template"> 
      <style> 
       .outer { 
        border:2px solid brown; 
        border-radius: 1em; 
        background: red; 
        font-size: 28pt; 
        width: 12em; 
        height:2em; 
        text-align: center; 
       } 
       .boilerplate { 
        color:white; 
        font-family: sans-serif; 
        padding:0.5em; 
       } 
       .name { 
        color:black; 
        background: white; 
        font-family: "Marker Felt", cursive; 
        font-size: 45pt; 
        padding-top:0.2em; 
       } 
      </style> 
      <div class="outer"> 
       <div class="boilerplate"> 
        Hi! my name is 
       </div> 
       <div class="name"> 
        alon 
       </div> 
      </div> 
     </script> 
     <script> 
      $(document).ready(function(){ 
       var shadow = document.querySelector("#myName").webkitCreateShadowRoot(); 
       console.log(shadow);// I get #shadow-root in the console 
       var template = $("#myNameTemplate").html();//also tried text(), without jQuery with innerHTML and other options 
       console.log(template);//I get the content of the template in the console 
       shadow.appendChild(template); //this part breaks 
      }); 
     </script> 
    </body> 
</html>

由于我的浏览器不支持我把它改成<script type="text/x-tmpl">本教学中新<template>标签。

编辑：我从控制台同样的错误，当我尝试：

shadow.appendChild('<div></div>') 
Error: NotFoundError: DOM Exception 8

来源

2013-03-21 alonisser

appendChild()从来没有工作过这样的

document.body.appendChild('<div></div>')会给你同样的错误。

你想要的是shadow.innerHTML = template;

来源

2013-03-22 20:44:06 dfreedm

你已经得到了一些标记的错误，并在脚本中的几行选择模板是不正确的。我修改了代码，以便它能够正常工作。

<script id="myNameTemplate" type="text/x-tmpl-template"> 
... 
</script>

这个

<template id="myNameTemplate"> 
... 
</template>

而在你在我修改的模板变种页面底部的脚本，它使用jQuery出于某种原因，而不是querySelector()。所以下面

$(document).ready(function(){ 
    var shadow = document.querySelector("#myName").webkitCreateShadowRoot(); 
    console.log(shadow);// I get #shadow-root in the console 
    var template = $("#myNameTemplate").html();//also tried text(), without jQuery with innerHTML and other options 
    console.log(template);//I get the content of the template in the console 
    shadow.appendChild(template); //this part breaks 
});

这个代码将成为这个

$(document).ready(function(){ 
    var shadow = document.querySelector("#myName").webkitCreateShadowRoot(); 
    var template = document.querySelector("#myNameTemplate"); 
    shadow.appendChild(template.content); 
});

下面是完整的标记

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test the shadow dom</title> 

</head> 
<body> 
    <div id="myName">Alon</div> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <template id="myNameTemplate"> 
     <style> 
      .outer { 
       border:2px solid brown; 
       border-radius: 1em; 
       background: red; 
       font-size: 28pt; 
       width: 12em; 
       height:2em; 
       text-align: center; 
      } 
      .boilerplate { 
       color:white; 
       font-family: sans-serif; 
       padding:0.5em; 
      } 
      .name { 
       color:black; 
       background: white; 
       font-family: "Marker Felt", cursive; 
       font-size: 45pt; 
       padding-top:0.2em; 
      } 
     </style> 
     <div class="outer"> 
      <div class="boilerplate"> 
       Hi! my name is 
      </div> 
      <div class="name"> 
       alon 
      </div> 
     </div> 
    </template> 
    <script> 
     $(document).ready(function(){ 
      var shadow = document.querySelector("#myName").webkitCreateShadowRoot(); 
      console.log(shadow);// I get #shadow-root in the console 
      var template = document.querySelector("#myNameTemplate");//also tried text(), without jQuery with innerHTML and other options 
      console.log(template);//I get the content of the template in the console 
      shadow.appendChild(template.content); //this part breaks 
     }); 
    </script> 
</body>

不能使用比模板的.content任何其他据我所知，因为模板是一个Document Fragment并访问您需要的片段红色来选择HTML5元素<template>的内部内容。

我看它的方式是，<template>标记基本上是一种创建文档片段的静态HTML方式，您可以使用javascript方法querySelector()来抓取文档片段。如果你想通过扩展或其他任何东西追加DOM，你可以使用createDocumentFragment()创建片段，但这是另一个青蛙桶。

来源

2013-11-20 14:25:44

哇，这是很久以前我几乎没有记得这个问题 – alonisser 2013-11-20 14:33:59

无法填充阴影DOM（下面的教程）

回答

相关问题