简单的 HyperHtmlElement 示例不显示任何内容

Question

我在 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>

...我做错了什么..？

谢谢。

Answer 1

您的代码有两个问题：

最新HyperHTMLElement自动为您带来hyperHTML。您不需要包含这两个脚本，只需包含 HyperHTMLELement 并在需要时随意从中导入 bind、wire 和其他 methods/utilities。
Firefox 尚未发布自定义元素。您需要一个 polyfill，例如 document-register-element 或其他。

正如您在 this CodePen 中看到的那样，Firefox 确实会像 Chrome 或 Safari 一样工作，Edge 也能正常工作。

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

简单的 HyperHtmlElement 示例不显示任何内容

Simple HyperHtmlElement example shows nothing

javascript

hyperhtml