Simple HyperHtmlElement example shows nothing

I cannot see any output with FireFox 57, while expecting '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>

... what am I doing wrong .. ?

thanks.

Solution

There are two issues with your code:

latest HyperHTMLElement brings hyperHTML to you automatically. You don't need to include both scripts, just include HyperHTMLELement and feel free to import bind, wire and other methods/utilities from it, if needed.
Firefox does not ship yet Custom Elements. You need a polyfill, such as document-register-element or others.

As you can see in this CodePen, Firefox will indeed behave like Chrome or Safari, and Edge will work as well.

I hope I've answered your question.