I'm trying to integrate a JS library into my LiveView app. Works in root.html.heex but not in LiveViews. Why?

I’m trying to integrate https://www.mathjax.org/ into my LiveView app.

If I insert these script lines into my root.html.heex:

 <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
 <script id="MathJax-script" async
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
 </script>

and then this to the html body element of the same file:

<p>
    When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
    \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
  </p>

I get the expected result:

However, if I insert the same paragraph element into one of my LiveView render templates, the math symbols just render as:

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]

Can anyone help me understand this? Thanks

https://hexdocs.pm/phoenix_live_view/dom-patching.html

I would expect at a minimum you need phx-update="ignore" on the container.

That did the trick! And I didn’t know anything about that functionality, so I learned something very useful. Many thanks!!