简单的HyperHtmlElement示例没有显示任何内容

问题描述 投票:0回答:1

我看不到FireFox 57的任何输出,同时期待'HyperHtmlElement'......

<html>
<head>
<title>canvas element test</title>
<meta charset='utf-8'>
</head>
<body>
<g2-canvas></g2-canvas>
<script src="https://unpkg.com/hyperhtml@latest/min.js"></script>
<script src="https://unpkg.com/hyperhtml-element@latest/min.js"></script>
<script>
class G2Canvas extends HyperHTMLElement {
    created() {
        console.log('#');
        this.render();
    }

    render() {
        return this.html`<strong>HyperHTMLElement</strong>`;
    }
}
G2Canvas.define('g2-canvas');
</script>
</body>
</html>

... 我究竟做错了什么 .. ?

谢谢。

javascript hyperhtml
1个回答
0
投票

您的代码有两个问题:

  1. 最新的HyperHTMLElement自动为您带来hyperHTML。您不需要包含这两个脚本,只需包含HyperHTMLELement,如果需要,可以随意导入bindwire和其他方法/实用程序。
  2. Firefox尚未发布自定义元素。你需要一个polyfill,如document-register-element或其他。

正如您在this CodePen中所看到的,Firefox确实会像Chrome或Safari一样运行,而Edge也可以运行。

我希望我已经回答了你的问题。

© www.soinside.com 2019 - 2024. All rights reserved.