在 html 自定义元素阴影 DOM中渲染 Mathjax

如何解决在 html 自定义元素阴影 DOM中渲染 Mathjax

自定义元素是我正在编写的页面的一个非常重要的部分，其中一些是为了包含数学。我目前无法在自定义元素中获取 tex 表达式以使用 MathJax 进行渲染。看下面的代码：

<!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 src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <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>

这里我们有一个简单的 customElement，它把它的内容插入到一个红色背景的 div 元素中。我已经将 MathJax 配置为使用“(”和“)”作为它的数学分隔符，所以理想情况下，“3^4”和“\frac{5}{7}”应该呈现。相反，我得到：

我也尝试过使用 MathJax tex2svg 功能，但即使文档中提到了像“MathJax.tex2chtml”这样的函数的存在，当我从自定义元素调用时，控制台通知我函数 tex2chtml 没有存在。这很奇怪，因为 customElement 知道 MathJax 变量（我可以记录它并查看它的内容）。

在 html 自定义元素阴影 DOM中渲染 Mathjax

如何解决在 html 自定义元素阴影 DOM中渲染 Mathjax

相关推荐