How do I change the textcontext of an SVG text element created from a symbol by a "use" tag

See more:

Javascript

SVG

I have been trying to implement javascript code which updates text elements in a SVG image. The SVG image is defined as a symbol, so that it can be reused multiple times, and instantiated using the use element:

<use id="x2" x="150" y="0" xlink:href="#rpm_dial"/>

However, when I update the textContext of the element that represents the instantiated text element in the Shadow DOM using the code below, the displayed text does not change from the default text that is specified in the symbol even thought the value of the textContext does indeed change to the assigned value.

var dial = document.getElementById("x2");
var root = dial.instanceRoot;
var children = root.childNodes;
for(var i = 0; i< children.length;i++)
{
    if (children.item(i).correspondingElement.getAttribute('id') == 'needle')
    {
	var needle = children.item(i).correspondingElement;
	needle.setAttribute("transform","rotate("+angle2+" 64, 64)");
    }
    if (children.item(i).correspondingElement.getAttribute('id') == 'counter')
    {
	var counter = children.item(i).correspondingElement;
	counter.textContext = angle2;
    }
}

What I have tried:

querying for the element directly in the DOM and then setting the textContext on that element works. But this does not allow me to create multiple instances of the symbol.

//document.getElementById("counter").textContent = angle2;