無法填充陰影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（下面的教程）

回答

相關問題