All All - 1 month ago 25
Javascript Question

How to avoid shadow-root in MathJax?

I want to access the SVG code created by

via javascript. Apparently,
put the SVG
, which is not directly accessible by
. Here is a picture of the elements given by Chrome

enter image description here

If I get the
element by any javascript method, the
children will not be included.

Answer Source

You cannot avoid shadow-root. It is not put there by MathJax renderer. It is because of the use tag. From MDN:

The <use> element takes nodes from within the SVG document, and duplicates them somewhere else.

So MathJax creates svg pathes and gives them ids and reuses them. Say the letter a is rendered into svg, and MathJax stores it in the svg with an id and use it when the letter a is needed to be rendered.

Below example from MDN speaks better.

<svg width="80" height="80" xmlns="">
    .classA {
      fill: red;
    <g id="Port">
      <circle style="fill: inherit;" r="10"/>
  <text y="15">black</text>
  <use x="50" y="10" href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" href="#Port" style="fill: blue;"/>