How to use MathJax inside polymer dart element?

Question

I am trying to use MathJax inside a polymer.dart element:

<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Any help would be appreciated. Update: Using this:

MathJax.Hub.Queue(["Typeset",MathJax.Hub,"myDivWithMath"]);

Have you read this article? https://www.dartlang.org/articles/js-dart-interop/ There is also progress on creating a new higher level package, but I'm not sure if it's done yet: https://github.com/dart-lang/js-interop — Greg Lowe, Dec 07 '14 at 21:47
This doesnt solve his issue. As MathJax queries for text nodes in document.body as I guess and MathJax doesnt know about ShadowDom. @John Try to find a function that parses the contents of a HTML Element. Then query for it and start parsing manually. — Robert, Dec 08 '14 at 18:09
@Robert I need to use this: MathJax.Hub.Queue(["Typeset",MathJax.Hub,"myDivWithMath"]); But I do not know how to call it from inside polymer element... or it simply can not operate inside the shadow dom? — John Redden, Dec 10 '14 at 01:03
Note from the future: cdn.mathjax.org is nearing its end-of-life, check https://mathjax.org/cdn-shutting-down for migration tips. — Peter Krautzberger, Apr 13 '17 at 13:13

score 0 · Answer 1 · edited May 23 '17 at 12:02

MathJax very probably tries to find the element by using querySelector('myDivWithMath') which doesn't work because this selector doesn't find the element.

You can try

MathJax.Hub.Queue(["Typeset",MathJax.Hub,"* /deep/ myDivWithMath"]);

don't use shadowDOM by adding the attribute 'lightdom' to the element. This is the only reference I found how to do this How to skip the Shadow DOM (and use the Light DOM) instead for Polymer templates (never used this myself yet).

How to use MathJax inside polymer dart element?

1 Answers1