aframe: Template created elements do not upgrade as CE

Description: If you use a template and inject offline AFrame components, these won’t ever be initialized in the live DOM world once appended.

var 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'); // use 'div' in Chrome
template.innerHTML = scene;
document.body.appendChild((template.content || template).firstElementChild);

However, if you change template with div, as example, you’ll see that once appended everything is fine.

This makes AFrame component not suitable for any library that creates them via modern template.

Please note this is a Chrome bug only, and I’m not sure if I can fix it via document-register-element polyfill because apparently you are using your own fork.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 22 (9 by maintainers)

Commits related to this issue

Most upvoted comments

Migration time has come. https://github.com/aframevr/aframe/pull/4167 moves A-Frame to Custom Elements V1. The old polyfill served as well a new one is also working as expected. Thanks for your help and patience.

Just so you have the feedback - I was bitten by this as well. Jumped in to a-frame, new to the webvr space, but very experienced with web components v1.

Created my project with my normal workflow, created custom elements wrapping a-frame scene, etc…

Nothing worked.

I love a-frame, you guys are doing an amazing job, but v1 is the future, looking forward to when I can use a-frame in the modern web components ecosystem.

Also happy to help with porting.

The reason we moved to a fork is WebReflection/document-register-element#55

that’s a bug report without any answer … last message is this one: https://github.com/WebReflection/document-register-element/pull/55#issuecomment-234586837

are you sure you still need that fork? your version might be behind various other fixes/changes

It has served us well, bug free for more than a year now.

yeah, DRE is battle tested since about ever: Google AMP, StencilJS and others use it too, happy it works

if it ain’t broke, don’t fix it

by definition, Software needs updates/maintenance though … in this case you have a little issue …

When can we expect V0 to be dropped?

V0 has never landed anywhere, it’s dropped since ever.

V1 though, is native in Safari for mac/iOS and Chrome, mobile and Desktop. That’s 70% of the Desktop + 90% of the Mobile Web … V0 is only and maybe Chrome

If you care about even more robust code and better performance for the majority of the Web, keeping AFrame in V0 is the wrong choice.

If you could tell me what exactly you need/why and how V1 does not work already, I’d be happy to try speeding up needed fixes.

Regards

I don’t question the value of templates what I meant is that in the context of VR experiences I have not seen much demand / need.

The reason we moved to a fork is https://github.com/WebReflection/document-register-element/pull/55 I would be happy to drop the fork but we would have to test thoroughly. It has served us well, bug free for more than a year now. if it ain’t broke, don’t fix it 😄 Thanks to you for that.

I would like to eventually move to V1, not sure if it’s a priority at the moment. What are the timelines for V1 implementation in all the browsers? When can we expect V0 to be dropped?