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