使用hyperHTML在Chrome上不显示的AFrame内容

在FireFox和Safari上呈现时，A-Frame内容不会在Chrome上呈现。使用hyperHTML在Chrome上不显示的AFrame内容

按照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>

来源

2017-10-17 Jacob Bremmer

更新：我力固定的问题hyperHTML即使它是关于AFRAME uaing自定义元素V0。一旦AFrame将迁移到V1，我将放弃force-fix。

你的代码笔，也是我的，现在的作品。问候

我已经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使用自定义元素填充（实际上是我的），当它从模板节点克隆时似乎不会触发注册表。

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

不幸的是，现在AFrame组件可能会遇到hyperHTML问题。

我的歉意，我会尽力解决这个尽快。

来源

2017-10-18 19:01:27

更新：Chrome是一个本地V0实现CustomElements和AFRAME是使用实施的唯一的浏览器。这并不能解决问题，但至少可以解释为什么其他浏览器没有问题。 AFrame可能需要更新其核心，但我会尽快回复。最好的祝福 –

只是为了澄清误解，已经证实这不是一个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身边任何额外的库。

有一个正在进行的调查，但你应该知道的是，任何基于现代模板元素来生成通用内容的库都将失败，并且只能在内部框架0.7中使用，并且只能在Chrome中使用。

更新在AFRAME库

来源

2017-10-20 18:40:25

使用hyperHTML在Chrome上不显示的AFrame内容

回答

相关问题