Question

我正在尝试使用Web组件，模板和shadow DOM来创建canvas元素。问题是我无法在原型中获取上下文，或者在创建阴影时遇到此错误：HierarchyRequestError：无法执行＆＃39; createShadowRoot＆＃39; on＆＃39;元素＆＃39;：为此元素禁用作者创建的阴影根。

<!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>

Answer 1

无论我如何尝试获取html canvas元素（使用 getElementsByTagName或anythig else）它说getContext不是功能

在定义HTMLCanvasElement.prototype

时，尝试用HTMLElement.prototype替换myPrototype

Canvas Shadow DOM和Web组件

1 个答案: