Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mathml version 3 equestions rendering issue inside Shadow Dom #2998

Open
reshmayadav415 opened this issue Feb 8, 2023 · 4 comments
Open

Mathml version 3 equestions rendering issue inside Shadow Dom #2998

reshmayadav415 opened this issue Feb 8, 2023 · 4 comments

Comments

@reshmayadav415
Copy link

reshmayadav415 commented Feb 8, 2023 •
edited by dpvc
Loading

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 :

image

MathML rendering outside the Shadow DOM :

image

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
Copy link
Member

dpvc commented Feb 10, 2023

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
Copy link

scruel commented Feb 20, 2023

Same issue, still wondering how to resolve it.

@dpvc
Copy link
Member

dpvc commented Feb 21, 2023

@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
Copy link

scruel commented Feb 22, 2023

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@dpvc @scruel @reshmayadav415