MathJax Rendering Issue

components.mathjax-container.js

import Ember from 'ember';

export default Ember.Component.extend({
  mathjax: Ember.inject.service(),
  tagName: 'span',
  
  didRender() {
    this.get('element').innerHTML = this.get('content') || '';
    	
    if(!Ember.isBlank(this.get('content'))) {
    	this.get('mathjax').rerender();
  	}
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember/MathJax Rendering Issue',

  actions: {
    updateContent: function() {
      this.set('content', this.get('newContent'));
    }
  }
});

services.mathjax.js

import Ember from 'ember';

export default Ember.Service.extend({
  rerender() {
    Ember.run.scheduleOnce('afterRender', this, 'renderFormulas');
  },
  
  renderFormulas(element) {
    if(window.MathJax) {
      MathJax.Hub.Queue(["Typeset", MathJax.Hub, element]);
    }
  },
  
  destroyFormulas(element) {
    if(window.MathJax) {
      const formulas = MathJax.Hub.getAllJax(element);
      formulas.forEach((formula) => {
        Ember.$(formula.SourceElement()).remove();
        formula.Remove();
      });
    }
  }
});

templates.application.hbs

<h1>{{appName}}</h1>
<p>MathJax seems to disrupt ember's re-rendering process when inline formulas are rendered, and there is ember-controlled content before and after the formula. When ember re-renders the 'mathjax-container' component below, any content/text nodes after the formula seem to become orphaned, and remain in the DOM.</p>
<p>Example:</p>
<ol>
<li>Enter the value and click Update:<br><strong><code>This is an inline formula \( 4+36 \div 2  \times  5^{2} -3 \) and this is text after the formula.</code></strong></li>
<li>Enter another value, e.g. <strong><code>Test</code></strong> and click Update.</li>
</ol>
{{input value=newContent}}
<button {{action "updateContent"}}>Update</button>
<br>
<br>
{{mathjax-container content=content}}
<br>
<br>
<p>{{mathjax-container content="Some static mathjax content \( 4+36 \div 4  \times  5^{3} -54 \) here"}}</p>

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.6.2",
    "ember-testing": "2.6.2",
    "mathjax": "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"
  },
  "addons": {}
}