Why is the HTML/DOM not updating in A-Frame?

Question

I am doing setAttribute or $.attr() on entities in A-Frame. For example,

el.setAttribute('position', '2 2 2');

The position updates, but I don't see it updating in the HTML/DOM inspector. I just set <a-entity position> How come?

Answer 1

https://aframe.io/docs/0.3.0/components/debug.html

By default, for performance reasons, A-Frame does not update the DOM with component data. If we open the browser’s DOM inspector, we will see that many entities will have only the component name visible:

<a-entity geometry material position rotation></a-entity>

The component data is stored internally. Updating the DOM takes CPU time for converting component data, which is stored internally, to strings. However, when we want to see the DOM update for debugging purposes, we can attach the debug component to the scene. Components will check whether the debug component is enabled before trying to serialize to the DOM. Then we will be able to view component data in the DOM:

<a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

To manually serialize to DOM on demand:

<a-scene>.flushToDOM()
<a-entity>.flushToDOM()

If you wish to use an Inspector to debug, try the A-Frame Inspector. https://aframe.io/docs/0.3.0/guides/using-the-aframe-inspector.html . Just open a scene and press <ctrl> + <alt> + i.