1

A-Frame-Inhalt wird in Chrome nicht wiedergegeben, während er auf FireFox und Safari gerendert wird.AFrame-Inhalt, der in Chrome nicht mit hyperHTML wiedergegeben wird

Gemäß 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()); 

Ich bin sicher, dass ich etwas fehle, denselben Inhalt rendert als statische HTML in allen Browsern (CodePen) in Ordnung.

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

Antwort

1

aktualisieren: Ich habe das Problem in hyperHTML-Kraft fixiert auch wenn es über AFrame uaing Benutzerdefinierte Elemente V0 ist. Ich werde den Force-Fix fallen lassen, sobald AFrame auf V1 migriert wird.

Ihr Code Pen, und meiner auch, funktioniert jetzt. Grüße


ich forked your pen und geschrieben ziemlich das gleiche Code haben:

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}`; 

aber ich hatte eine sehr hässliche Zeile am Ende hinzuzufügen:

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

Dies liegt daran,

AFrame verwendet ein Custom Elements-Polyfill (eigentlich meins), das die Registrierung nicht auslöst, wenn es von einem Vorlagenknoten geklont wird.

Es gibt a polyfill known issue, die ich nie reproduzieren konnte, und dies könnte der Anwendungsfall sein, nach dem ich gesucht habe.

Leider scheint AFrame Komponenten im Moment Probleme mit hyperHTML zu haben.

Entschuldigung, ich werde versuchen, dies so schnell wie möglich zu beheben.

+1

Update: Chrome ist der einzige Browser mit einer nativen V0 Implementierung von CustomElements und AFrame, dass die Umsetzung verwendet. Dies löst das Problem nicht, aber es erklärt zumindest, warum jeder andere Browser ohne Probleme funktioniert. Es kann sein, dass AFrame ihren Kern aktualisieren muss, aber ich werde so schnell wie möglich zurückkommen. Freundliche Grüße –

0

nur um Missverständnisse zu klären, wurde verifiziert, dass dies kein hyperHTML-Fehler ist.

Schreiben der folgenden

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); 

würde auch scheitern, ohne eine zusätzliche Bibliothek neben AFrame inklusive.

Es gibt eine laufende Untersuchung, aber was Sie beachten sollten, ist, dass jede Bibliothek, die auf einem modernen Template-Element basiert, generische Inhalte erzeugt, mit aframe 0.7 und nur in Chrome ausfällt.

aktualisieren in AFrame Repository

Verwandte Themen