Простой пример 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 ответ
Решение
Есть два вопроса с вашим кодом:
- самый последний
HyperHTMLElement
приноситhyperHTML
вам автоматически. Вам не нужно включать оба сценария, просто включитеHyperHTMLELement
и не стесняйтесь импортироватьbind
,wire
и другие методы / утилиты из него, если это необходимо. - Firefox пока не поставляется с Custom Elements. Вам нужен полифилл, такой как https://github.com/WebReflection/document-register-element или другие.
Как вы можете видеть в этом CodePen, Firefox действительно будет вести себя как Chrome или Safari, и Edge также будет работать.
Я надеюсь, что ответил на ваш вопрос.