Getting math to render inside custom elements (shadow DOM)

249 views
Skip to first unread message

Buster Lundgaard

unread,
Jun 25, 2021, 5:54:35 AM6/25/21
to MathJax Users
Hi. Custom elements are a pretty important par of the book i'm writing, but i'm facing difficulty getting math to render at all. 

Take a look at the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script>
        MathJax = {
          tex: {
            inlineMath: [['_(','_)']],
            displayMath: [['_($', '_)']],
          },
          svg: {
            fontCache: 'global'
          }
        };
    </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

</head>
<body>

    <p>
    Hi! My name's buster. Here's some _(1+2+3_) cool as 
    _($\text{MATH}_)
    How's it going.
    </p>

    <bus-but> Hi there! I am _(3^4_) quite _(\frac{5}{7}_) good! </bus-but>

</body>

<script>

    class HoverVideo extends HTMLElement {
        constructor() {
            super();

            //Create shadow
            var shadow = this.attachShadow({mode: 'open'});

            //Make element
            var theElement = document.createElement('div');
            theElement.setAttribute("id", "coolElement")
            theElement.style = "background-color: red;"

            shadow.appendChild(theElement);

        }

        connectedCallback() {
            this.shadowRoot.getElementById("coolElement").innerHTML = this.innerHTML;
            this.innerHTML="";
            
            console.log(MathJax);
        }
    }
    customElements.define("bus-but",HoverVideo);

</script>


Here we have a simple customElement that inserts it's contents in a <div> with a red background. I've configured MathJax to use "_(" and "_)" for it's math delimeters, so 
ideally  "3^4" and  " \frac{5}{7}" should render. Instead i get the linked image below. 

I've tried using MathJax tex2svg functionality as well, but even though the docs mention the existance of functions like "MathJax.tex2chtml", when i call from the custom element, the console informs me that the function tex2chtml doesn't exist. This is strange since the customElement *is* aware of the MathJax variable (i can log it and see it's contents). 

Any help is appreciated.
Kind regards Buster 
MathjaxCustomElements.png

Davide Cervone

unread,
Jun 25, 2021, 7:32:15 AM6/25/21
to mathja...@googlegroups.com
First, MathJax doesn't run automatically on new content when you change innerHTML; you have to tell it that you have aded new math to the page and ask it to run on that math.  See the documentation at:


for details.

But for custom elements that use ShadowDOM, that means they are in their own DOM, and you have to take that into account as well.  There have been a number of discussions of this in the issue tracker.  See in particular


These give sample code that you may be able to leverage for your own situation.

Davide


--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/7a47ead4-2021-461b-8b8f-f98946f05869n%40googlegroups.com.
<MathjaxCustomElements.png>

Reply all
Reply to author
Forward
0 new messages