javascript - カスタム aurelia 属性での単純な DOM 操作

Question

簡単な DOM 操作をテストして、Aurelia カスタム属性を試しています。

驚いたことに、親の svg ノードに楕円ノードを追加して操作を実行すると、HTML は変更されますが、楕円はレンダリングされません。

innerHtml プロパティの操作は期待どおりに機能します。

import { bindable, inject} from 'aureliaframework';

@inject(Element)
export class TestCustomAttribute {

    constructor(private element: SVGElement) {
    }
    attached()
    {
        var ellipse = document.createElement("ellipse");
        ellipse.setAttribute("cx","200");
        ellipse.setAttribute("cy","200");
        ellipse.setAttribute("rx","100")
        ellipse.setAttribute("ry","100")
        ellipse.setAttribute("style","fill:blue")

        //this is rendered
        this.element.innerHTML = "<ellipse style='fill: purple' cx='200' cy='200' rx='100' ry='100'></ellipse>"
         
         //this shows on DOM explorer but not rendered
         this.element.appendChild(ellipse)
    }

要素 innerHtml を操作する代わりに、appendNode() を使用して目的の結果を達成することは可能ですか?