前端自定义组件如何实现追加元素的自动实例化

Question

非MVVM项目
比如定义组件 <component-a> 组件：

const ComponentA = function(ele){
    this.init(ele);
}
ComponentA.prototype = {
    constructor : ComponentA,
    init:function(ele){
      this.createElement(ele,this._getData(ele));
    },
    createElement:function(ele,data){
      this.getTargetElement([...this.ele.attributes],data)
      this._replaceElement(ele,targetEle);
    },
    getTargetElement(attributes,data){
      ……
    },
    getData(ele){
      ……
    },
    _replaceElement(ele){
      ……
    }
}

$("component-a").each(function(){
  new ComponentA(this);
})

使用方法为以下两种：

<component-a name="test1"></component-a>

<div name\="test2"></div> 
$("\[name=test2\]").componentA({params:params});

如果追加元素$(body).append('<component-a name="test3"></component-a>')，test3 在 dom 中存在还是以原始文本存在，而非替换成 <component-a> 组件。
那么怎么实现 <component-a> 才能让 test3 自动实例化呢？