All All - 1 month ago 25
Javascript Question

How to avoid shadow-root in MathJax?

I want to access the SVG code created by

MathJax
via javascript. Apparently,
MathJax
put the SVG
<path>
under
shadow-root
, which is not directly accessible by
javascript
. Here is a picture of the elements given by Chrome

enter image description here

If I get the
<svg>
element by any javascript method, the
<path>
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="http://www.w3.org/2000/svg">
  <style>
    .classA {
      fill: red;
    }
  </style> 
  <defs>
    <g id="Port">
      <circle style="fill: inherit;" r="10"/>
    </g>
  </defs>
 
  <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;"/>
</svg>