For context, I’m trying to simulate a player grabbing a virtual object with their VR hand controller by attaching the object’s entity as a child of the entity with a hand-controls component.

I’m running into an issue with a hand-controls entity not rendering the children of its children entities in AFRAME version: 1.6.0

Several levels of <a-entities> declared directly in the DOM render properly. For example, this will write ‘foo bar’ on the back of the hand model:

<a-entity hand-controls="hand: left; ...">
  <a-text value="foo" position="-0.028 0.05 0" rotation="185 90 0">
    <a-text value="bar" position="0.03 0 0"></a-text>
  </a-text>
</a-entity>

Where things go pear-shaped is when I attempt to do this programmatically, by detaching a group of entities from the scene and reattaching them to the hand-controls entity:

index.html:
<a-box id="foo" color="red" position="1 2 -3" width...>
  <a-box id="bar" color="yellow" position="-0.5 0 -1"></a-box>
</a-box>
<a-entity hand-controls="hand: left; ..."></a-entity>

some system or component JS file:
  foo = document.querySelector('#foo');
  foo.removeFromParent();
  // foo had a world position, resetting it so it's local to the hand controller's origin (otherwise it will render far from the hand model rather than in its palm)
  foo.setAttribute('position', '0 0 0');
  document.querySelector('[hand-controls]').appendChild(foo);

This will put the #foo box in the hand model, but the nested #bar box isn’t rendered at all.

I just don’t understand why that is, or what transformation/step I’m missing to make all the hierarchy of nested children render. Any help/insights appreciated.