Javascript 使用Js中的模板调用Js类，而不使用单独的Html文件

我有一个需求，需要使用阴影DOM构建图表。现在我有一个HTML文件和一个javascript文件。我在javascript文件中创建了一个自定义元素，然后从HTML文件调用自定义元素。我想从javascript文件内部调用自定义元素

class ChartComponent扩展了HtmleElement{
构造函数（）{
超级（）；
this._shadowRoot=this.attachShadow（{'mode'：'open'}）；
this.chart=document.createElement（'div'）；
this.chart.id=1337；
this.\u shadowRoot.appendChild（this.chart）；
}
connectedCallback（）{
让chart=new CanvasJS.chart（this.\u shadowRoot.getElementById（this.chart.id）{
标题：{
正文：“基本柱状图”
},
数据：[{
数据点：[
{x:10，y:71}，
{x:20，y:55}，
{x:30，y:50}，
{x:40，y:65}，
{x:50，y:95}，
{x:60，y:68}，
{x:70，y:28}，
{x:80，y:34}，
{x:90，y:14}
]
}]
});
chart.render（）；
}
}
定义（'my-chart'，ChartComponent）
如果没有HTML，那么就没有DOM
document.createElement（“我的图表”）
将运行构造函数，但不会运行ConnectedCallback如果没有HTML，则没有DOM
document.createElement（“我的图表”）
将运行构造函数，但不会运行connectedCallback