javascript - 无法使用hyperHTML在Chrome上呈现AFrame内容

A-Frame内容在FireFox和Safari上呈现时不会在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());

我确定我丢失了一些东西，所有浏览器（CodePen）中相同的内容都可以像静态HTML一样呈现。

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

最佳答案

更新：我已经在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方面遇到了麻烦。

抱歉，我将尽快修复此问题。

Aframe

javascript - 无法使用hyperHTML在Chrome上呈现AFrame内容