Why doesn't Aframe's dependencies attribute not working?

I have the following simple example of initializing entities with components:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, WebVR! - A-Frame</title>
    <meta name="description" content="Hello, WebVR! - A-Frame">
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  </head>
  <script>
    AFRAME.registerComponent('a', {
      dependencies: ['b']
    });
    // Initializes second.
    AFRAME.registerComponent('b', {
      dependencies: ['c']
    });
    // Initializes first.
    AFRAME.registerComponent('c', {});
  </script>
  <body>
    <a-scene>
    </a-scene>
  </body>
  <script>
    sceneEl = document.querySelector('a-scene');
    aEntity = document.createElement('a-entity');
    aEntity.setAttribute('a');
    sceneEl.appendChild(aEntity);
  </script>
</html>

This is from the documentation of Aframe regarding components and dependencies

dependencies: allows for control on ordering of component initialization if a component depends on one or more other components. Component names specified in the dependencies array will be initialized left-to-right before initializing the current component. If the dependency have other dependency components, those other dependency components will be ordered in the same manner.

My question is why is this code not working. The code generates the a-entity as expected but no component is being attached. I would expect to see a, b, and c Attached to my entity. What am I doing wrong?

Solution

Looks like if you don't supply a value for setAttribute it's ignored.

Try aEntity.setAttribute('a', ''); instead.

Console should show: <a-entity c="" b="" a="" position="" rotation="" scale="" visible=""></a-entity>

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, WebVR! - A-Frame</title>
    <meta name="description" content="Hello, WebVR! - A-Frame">
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  </head>
  <script>
    AFRAME.registerComponent('a', {
      dependencies: ['b']
    });
    // Initializes second.
    AFRAME.registerComponent('b', {
      dependencies: ['c']
    });
    // Initializes first.
    AFRAME.registerComponent('c', {});
  </script>
  <body>
    <a-scene>
    </a-scene>
  </body>
  <script>
    sceneEl = document.querySelector('a-scene');
    aEntity = document.createElement('a-entity');
    aEntity.setAttribute('a', '');
    sceneEl.appendChild(aEntity);
    console.log(aEntity)
  </script>
</html>