Repository navigation
Mathml version 3 equestions rendering issue inside Shadow Dom #2998
Description
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
Activity
dpvc commentedon 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 commentedon Feb 20, 2023
Same issue, still wondering how to resolve it.
dpvc commentedon 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 commentedon Feb 22, 2023
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