The issue of AFrame content failing to display on Google Chrome when used with hyperHTML

Question

The issue of AFrame content failing to display on Google Chrome when used with hyperHTML

There seems to be an issue with A-Frame content not rendering on Chrome, despite working fine on FireFox and Safari.

According to the demonstration on 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 not sure what I'm missing, as the same content renders correctly as static HTML in all browsers on 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>

javascript three.js single-page-application aframe hyperhtml

Answer 1

Answer №1

New Development: I managed to resolve the issue within hyperHTML, even though it pertains to AFrame using Custom Elements V0. I will remove the temporary fix once AFrame transitions to V1.

Your CodePen, as well as mine, now function properly. Thank you

I have copied your pen and replicated almost identical 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}`;

However, I had to add a rather unsightly line at the end:

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

This is necessary because AFrame makes use of a Custom Elements polyfill (specifically mine), which doesn't appear to trigger the registry when cloned from a template node.

There is an outstanding issue with the polyfill that I have yet to replicate, and this scenario may provide the opportunity to do so.

Regrettably, it seems that currently AFrame components may encounter challenges with hyperHTML.

I apologize for any inconvenience and will work on resolving this promptly.

Answer 2

New Development: I managed to resolve the issue within hyperHTML, even though it pertains to AFrame using Custom Elements V0. I will remove the temporary fix once AFrame transitions to V1.

Your CodePen, as well as mine, now function properly. Thank you

I have copied your pen and replicated almost identical 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}`;

However, I had to add a rather unsightly line at the end:

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

This is necessary because AFrame makes use of a Custom Elements polyfill (specifically mine), which doesn't appear to trigger the registry when cloned from a template node.

There is an outstanding issue with the polyfill that I have yet to replicate, and this scenario may provide the opportunity to do so.

Regrettably, it seems that currently AFrame components may encounter challenges with hyperHTML.

I apologize for any inconvenience and will work on resolving this promptly.

Answer 3

Answer №2

It has been confirmed that the issue is not related to hyperHTML, just to clear up any confusion.

Consider the code snippet below:

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

This code would also fail without the need for any additional libraries other than AFrame.

There is currently an investigation underway, but it is important to note that any library that relies on the modern template element to generate generic content will encounter issues with aframe 0.7, specifically in Chrome.

Update: A bug has been reported in the AFrame repository.

Answer 4

It has been confirmed that the issue is not related to hyperHTML, just to clear up any confusion.

Consider the code snippet below:

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

This code would also fail without the need for any additional libraries other than AFrame.

There is currently an investigation underway, but it is important to note that any library that relies on the modern template element to generate generic content will encounter issues with aframe 0.7, specifically in Chrome.

Update: A bug has been reported in the AFrame repository.

The issue of AFrame content failing to display on Google Chrome when used with hyperHTML

Answer №1

Answer №2

Similar questions

Unable to Trigger Virtual Click Event on Calendar in JavaScript

Working on rectifying the Chat Engine API code that was causing a 403 Status Code to be generated

Unraveling the mystery: accessing the same variable name within a function in JavaScript

Netbeans lacks compatibility with JavaScript

What is the best way to determine if a Google Apps user is not an administrator?

Avoiding an event from spreading in Angular

What is the best way to implement a sidebar closing animation?

I am trying to figure out how to dynamically set the deployUrl during runtime in Angular

unable to make a request to the express server with axios

Looking to develop a dynamic password verification form control?

Optimizing the Placement of Dynamic Google Maps

I am configuring Jest in my Vite and TypeScript-powered React project

Add CSS styles to the outermost container element when the slideshow is currently in use

The event for 'deviceready' in Cordova is not getting triggered when placed inside the angular .run block

Create a single declaration in which you can assign values to multiple const variables

displaying a post-end issue on the express server

What could be causing the value of response.name to be undefined in this situation?

Trigger ng-change event for each dropdown selection made in AngularJS

Can the load API in jQuery be utilized to load fragments using a class selector instead of an id?

What is the process for verifying the size of file uploads using Multer in Express?