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.
- A-Frame Version: 0.7.0
- Platform / Device: Chrome (V0 native)
- Reproducible Code Snippet or URL: https://codepen.io/WebReflection/pen/xXMxEO?editors=0010
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 22 (9 by maintainers)
Commits related to this issue
- Forcing A-Frame compatibility with Custom Elements V0 API There is an issue with AFrame and Custom Elements creted using the deprecated V0 API, as described in here: https://github.com/aframevr/afram... — committed to WebReflection/hyperHTML by WebReflection 7 years ago
- DOM First pass at A-Frame with generic WebVI DOM API Ran into a known issue in Chrome where using template elements in Chrome causes a-frame elements to fail to initialize. Might need a-frame specifi... — committed to rajsite/webvi-experiments by rajsite 5 years ago
- Add createDocumentFragment with inert toggle Found an issue testing the aframe custom elements with the DOM API due to: https://github.com/aframevr/aframe/issues/3182 Added a toggle to createDocumen... — committed to rajsite/webvi-experiments by rajsite 5 years ago
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.
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
yeah, DRE is battle tested since about ever: Google AMP, StencilJS and others use it too, happy it works
by definition, Software needs updates/maintenance though … in this case you have a little issue …
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?