使用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內容

回答

相關問題