2016-06-14 9 views
0

キャンバス要素を作成するために、Webコンポーネント、テンプレート、およびシャドーDOMを利用しようとしています。問題は私がプロトタイプの中でcontexを得ることができないか、またはシャドウを作成するときにこのエラーが出ることです。HierarchyRequestError: 'Element'で 'createShadowRoot'を実行できませんでした。キャンバスシャドーDOMとWebコンポーネント

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="utf-8"> 


<link rel="import" href="mycanvas.html"> 

</head> 

<body> 

<canvas is="my-canvas"></canvas> 






</body> 
</html> 


<template id="mytemplate"> 
<style> 
p {color:green;} 
span {text-decoration: underline;} 
canvas {background-color: #f00; 
     width:300px;} 
</style> 

</template> 
<script> 

(function() { 



    var myPrototype= Object.create(HTMLElement.prototype); 
    var myDocument=document.currentScript.ownerDocument; 




    myPrototype.createdCallback=function() { 
           var shadow= this.createShadowRoot(); 
           var template=myDocument.querySelector("#mytemplate"); 
           var clone= document.importNode(template.content, true); 

           shadow.appendChild(clone); 





              } //end prototype 




    var myCanvas= document.registerElement('my-canvas', { 

     prototype: myPrototype, 
     extends:'canvas' 

    });  
}()); 
</script> 
+0

'' VARシャドウ= this.createShadowRoot()でthis'何ですかを定義するときHTMLElement.prototypeためHTMLCanvasElement.prototypeに置き換えてみてください。 '? ' 'は' html'の '