title: How do get Aurelia to render my view after dynamically adding a custom element to the DOM?
body: <p>When creating a custom element in the DOM and adding a respective view model which implements bindable from the aurelia-framework, my view renders perfectly.</p>
  
  <p>custom element in DOM as so:</p>
  
  <pre><code>&lt;!-- chatbox.html --&gt;
  &lt;template&gt;
  ...    
      &lt;ul class="chat"&gt;
          &lt;answer name="Reah Miyara" nickname="RM" text="Hello World"&gt;&lt;/answer&gt;
      &lt;/ul&gt;
  ...
      &lt;button class="btn" click.trigger="addCustomElement()"&gt;Add&lt;/button&gt;
  ...
  &lt;/template&gt;
  </code></pre>
  
  <p>Aurelia's magic rendering results in various children elements associated with the custom element in the DOM, when inspecting from the browser. </p>
  
  <p>The issue arises when I am attempting to dynamically add additional custom elements to the DOM using jQuery like so...</p>
  
  <pre><code>// chatbox.js
  addCustomElement() { 
      $('.chat').append('&lt;answer name="Joe Smith" nickname="JS"&gt;&lt;/answer&gt;');
  }
  </code></pre>
  
  <p>Invoking this method using the button <em>(Aurelia's 'click.trigger')</em> indeed adds the custom element to the DOM, but <strong>without</strong> the various children elements which allows the custom element to be properly rendered in the view... </p>
  
  <p>How do I properly dynamically add custom elements to the DOM or tell Aurelia to process a custom element which I have added so it renders in my view?</p>
  
  <p>Thanks in advance!</p>