AFrame 内容无法在具有 hyperHTML 的 Chrome 上呈现答案

【问题标题】：AFrame content not rendering on Chrome with hyperHTMLAFrame 内容无法在具有 hyperHTML 的 Chrome 上呈现
【发布时间】：2017-10-21 21:54:35
【问题描述】：

在 FireFox 和 Safari 上呈现时，A-Frame 内容不会在 Chrome 上呈现。

根据CodePen here const { hyper, wire } = hyperHTML;

class Box extends hyper.Component {

  render() { return this.html`
    <a-scene>
        <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
  `;
  }
}

document.body.appendChild(new Box().render());

我确定我遗漏了一些东西，相同的内容在所有浏览器中都呈现为静态 HTML (CodePen)。

<body>
  <a-scene>
    <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
  </a-scene>
</body>

【问题讨论】：

标签： javascript three.js single-page-application aframe hyperhtml

【解决方案1】：

更新：我已经强制修复了 hyperHTML 中的问题，即使它是关于 AFrame 使用自定义元素 V0。一旦 AFrame 迁移到 V1，我将放弃强制修复。

您的代码笔和我的代码笔现在都可以使用了。问候

我有 forked your pen 并编写了几乎相同的代码：

const { hyper } = hyperHTML;

class Box extends hyper.Component {
  render() { return this.html`
    <a-scene>
          <a-box color="red"
            position="0 2 -5"
            rotation="0 45 45"
            scale="2 2 2"></a-box>
        </a-scene>`;
  }
}

hyper(document.body)`${new Box}`;

但我不得不在最后添加一条非常丑陋的行：

// if you comment this out nothing works
document.body.innerHTML = document.body.innerHTML;

这是因为 AFrame 使用了自定义元素 polyfill（实际上是我的），当它从模板节点克隆时似乎不会触发注册表。

有 a polyfill known issue 我从来没有能够重现，这可能是我正在寻找的用例。

不幸的是，现在 AFrame 组件似乎在处理 hyperHTML 时遇到了问题。

抱歉，我会尽快解决这个问题。

【讨论】：

更新：Chrome 是唯一具有 CustomElements 原生 V0 实现的浏览器，而 AFrame 正在使用该实现。这并不能解决问题，但至少它解释了为什么其他所有浏览器都可以正常工作。可能是 AFrame 需要更新他们的核心，但我会尽快回来。最好的问候

【解决方案2】：

只是为了澄清误解，已经证实这不是一个 hyperHTML 错误。

编写以下内容

const scene = `<a-scene>
  <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
</a-scene>`;

var template = document.createElement('template');
template.innerHTML = scene;
document.body.appendChild(template.content);

如果在 AFrame 之外不包含任何额外的库，也会失败。

正在进行一项调查，但您应该注意的是，任何基于现代模板元素生成通用内容的库都将在 aframe 0.7 中失败，并且仅在 Chrome 中。

更新 AFrame 存储库中的bug filed

【讨论】：