javascript three.js single-page-application aframe hyperhtml

AFrame content not rendering on Chrome with hyperHTML

A-Frame content does not render on Chrome while it renders on FireFox and Safari.

As per 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());

I'm sure I'm missing something, same content renders fine as static HTML in all browsers (CodePen).

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

Solution

Update: I've force-fixed the issue in hyperHTML even if it's about AFrame uaing Custom Elements V0. I will drop the force-fix once AFrame will migrate to V1.

Your Code Pen, and mine too, now works. Regards

I've forked your pen and written pretty much the same code:

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

but I had to add a very ugly line at the end:

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

This is because AFrame uses a Custom Elements polyfill (actually mine) which does not seem to trigger the registry when it's cloned from a template node.

There is a polyfill known issue that I've never been able to reproduce and this might be the use case I was looking for.

Unfortunately it seems that right now AFrame components might have troubles with hyperHTML.

My apologies, I'll try to fix this ASAP.