<!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>
</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>
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