Простой пример HyperHtmlElement ничего не показывает

Я не вижу никаких выходных данных с 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>

... Что я делаю неправильно..?

Благодарю.

1 ответ

Решение

Есть два вопроса с вашим кодом:

  1. самый последний HyperHTMLElement приносит hyperHTML вам автоматически. Вам не нужно включать оба сценария, просто включите HyperHTMLELement и не стесняйтесь импортировать bind, wire и другие методы / утилиты из него, если это необходимо.
  2. Firefox пока не поставляется с Custom Elements. Вам нужен полифилл, такой как https://github.com/WebReflection/document-register-element или другие.

Как вы можете видеть в этом CodePen, Firefox действительно будет вести себя как Chrome или Safari, и Edge также будет работать.

Я надеюсь, что ответил на ваш вопрос.

Другие вопросы по тегам