Mathml version 3 equestions rendering issue inside Shadow Dom

reshmayadav415 commented 1 year ago

Issue Summary

I am using below MathML version 3 CDN reference. <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-svg.min.js"></script>

I am rendering MathML version 2 and 3 equations inside the Shadow DOM and outside the Shadow DOM using MathML version 3.

MathML version 2 equation : <math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><msup><mfenced><mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow></mfenced><mn>2</mn></msup></mrow> </math>
MathML version 3 equation : <math xmlns="http://www.w3.org/1998/Math/MathML"><mo>[</mo><mi>K</mi><mi>r</mi><mo>]</mo><mn>5</mn><msup><mi>s</mi><mn>1</mn></msup></math>

But the equations inside the Shadow DOM are not rendering properly, however the equations outside the Shadow DOM are rendering properly. The demo is available here.

MathML rendering inside the Shadow DOM :

MathML rendering outside the Shadow DOM :

Below is the source code:

<html>
<body>

<template id="scriptContainer">

  <!--start-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-svg.min.js">

    </script>
  <!--end-->

</template>
<script>

customElements.define('show-hello', class extends HTMLElement {
  connectedCallback() {
    var parag = document.createElement('p');
    const shadow = this.attachShadow({mode: 'open'}).appendChild(parag).append(scriptContainer.content.cloneNode(true));;

    parag.innerHTML = `
    v2 example:<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><msup><mfenced><mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow></mfenced><mn>2</mn></msup></mrow> </math><br/> v3 example:<math xmlns=\"[http://www.w3.org/1998/Math/MathML\](http://www.w3.org/1998/Math/MathML%5C)"><mo>[</mo><mi>K</mi><mi>r</mi><mo>]</mo><mn>5</mn><msup><mi>s</mi><mn>1</mn></msup></math>, ${this.innerHTML}
   `;

  }
});
</script>
<show-hello></show-hello>
v2 example:<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><msup><mfenced><mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow></mfenced><mn>2</mn></msup></mrow> </math><br/>
v3 example:<math xmlns=\"[http://www.w3.org/1998/Math/MathML\](http://www.w3.org/1998/Math/MathML%5C)"><mo>[</mo><mi>K</mi><mi>r</mi><mo>]</mo><mn>5</mn><msup><mi>s</mi><mn>1</mn></msup></math>

</body>
</html>

Am I doing anything wrong here? Please suggest how to fix this.

Technical details: MathJax Version: 3.2.2 Client OS: Windows 10 Pro Browser: latest chrome

dpvc commented 1 year ago

MathJax expects to work in a complete DOM (that includes <head> and similar elements), but ShadowDOM is just a document-fragment, not a complete DOM, and so MathJax can't find some of the elements that it needs to work with. So working inside a ShadowDOM has been problematic in the past.

There are some examples of approaches that have worked in the past here, and in #2195, #2263, #2590.

Note that running MathJax inside multiple ShadowDOM elements is not going to be very efficient, as each ShadowDOM will have its own copy of MathJax, and processing the math will cause a page reflow for each ShadowDOM, a significant performance hit. When the math is all in the main DOM, MathJax can limit the number of reflows as it processes the math. Finally, if your readers access the MathJax contextual menu on an expression in the ShadowDOM, the menu will be restricted to the ShadowDOM, and will be clipped to the size of the ShadowDOM, which may make it hard to use.

Unless there is a critical need to encapsulate your content in a ShadowDOM, I'd recommend against using MathJax within one.

scruel commented 1 year ago

Same issue, still wondering how to resolve it.

dpvc commented 1 year ago

@scruel, I really can't help without seeing what you have done. I'm not planning to spend my own time coming up with an example for you, as I've already posted exampled linked above, and because I don't think it is a good idea to use MathJax in ShadowDOM. If you give a complete example, as the original poster did, I might be able to point out some issues, but "Same issue" is not sufficient to offer additional advice.

scruel commented 1 year ago

@scruel, I really can't help without seeing what you have done. I'm not planning to spend my own time coming up with an example for you, as I've already posted exampled linked above, and because I don't think it is a good idea to use MathJax in ShadowDOM. If you give a complete example, as the original poster did, I might be able to point out some issues, but "Same issue" is not sufficient to offer additional advice.

Sorry, I am trying to parse LaTeX formulas on bing.com, all elements which contain them are inside the shadow root DOM. For code, you can check the following link when you have time: https://github.com/scruel/tampermonkey-scripts/blob/main/chatgpt-latex-render.js

mathjax / MathJax

Mathml version 3 equestions rendering issue inside Shadow Dom #2998