Ao criar um elemento personalizado no DOM e adicionar um modelo de visualização respectivo que implemente vinculável a partir do aurelia-framework, minha visualização é renderizada perfeitamente.

elemento personalizado no DOM da seguinte forma:

<!-- chatbox.html -->
<template>
...    
    <ul class="chat">
        <answer name="Reah Miyara" nickname="RM" text="Hello World"></answer>
    </ul>
...
    <button class="btn" click.trigger="addCustomElement()">Add</button>
...
</template>

A renderização mágica de Aurelia resulta em vários elementos filhos associados ao elemento personalizado no DOM, ao inspecionar a partir do navegador.

O problema surge quando estou tentando adicionar dinamicamente elementos personalizados adicionais ao DOM usando o jQuery da seguinte maneira ...

// chatbox.js
addCustomElement() { 
    $('.chat').append('<answer name="Joe Smith" nickname="JS"></answer>');
}

Invocando este método usando o botão('Click.trigger' de Aurelia) realmente adiciona o elemento personalizado ao DOM, massem os vários elementos filhos que permitem que o elemento personalizado seja renderizado corretamente na exibição ...

Como adiciono dinamicamente elementos personalizados ao DOM de maneira adequada ou digo ao Aurelia para processar um elemento personalizado que eu adicionei para que seja processado em minha opinião?

Desde já, obrigado!