A-Frame内容在Chrome上渲染时不会在Chrome上渲染。
根据这里的代码笔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,我将放弃强制修复。
你的代码笔,以及我的代码笔,现在都可以工作了。问候
我已经分叉了你的笔并编写了几乎相同的代码:
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 已知问题,这可能是我正在寻找的用例。
不幸的是,现在AFrame组件似乎可能会遇到超HTML问题。
很抱歉,我会尽快解决这个问题。
只是为了澄清误解,已经验证这不是一个超HTML错误。
编写以下内容
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 存储库中提交的错误