Correct way to retrieve text from a text-entity in A-frame

Question

I was experimenting with retrieving text from text components but surprisingly I couldn't get the desired result using the method that was in the documentation.

Resorting to getAttribute("text") is enough for my needs but I'm looking to understand why the method described in "textdemo2" doesn't work.

      <a-entity mixin="marker" position="-1 2 0.01" ></a-entity>
      <a-entity position="-1 2 0"
                text="width: 2; lineHeight: 50; letterSpacing: 5; color: white;
                value: [LINE AND LETTER SPACING] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam">
      </a-entity>

      <a-text id="textdemo2"
              position="-1 3 0"
              width="2"
              letter-spacing="5"
              line-height="50"
              value="Hello, World!" ></a-text>
      
      <script>
        const textdemo = document.querySelector('#textdemo').getAttribute("text");
        console.log(textdemo)

        const textdemo2 = document.querySelector('#textdemo2').component.texts.value;
        console.log(textdemo2)
      </script>

Side Question: I'm also confused as to which text entity creation method is best to use, is straight forward enough but is there any reason to ever use the a-entity version?

Answer 1

<a-text ...></a-text> and other primitives are just short-hands for an <a-entity> + components. My personal preference is using <a-entity> since it gives more clarity on what's going on. To get the value of component properties use getAttribute:

  const textdemo2 = document.querySelector('#textdemo2').getAttribute("text").value;