自定义组件-如何克隆定义为js字符串文字的html模板?

我试图理解vanilla web组件的不同部分是如何协同工作的。我定义了一个简单的自定义组件,并试图包括一个模板。我这么做是因为许多浏览器供应商不支持html导入,转而使用es6模块。这是我的web组件:

var tmpl = `<template>
<h1>header</h1>
<p>copy</p>
</template>`;

class MyComponent extends HTMLElement {
    constructor() {
        super();
    }
    connectedCallback() {
        let z = tmpl.cloneNode(true);
        this.appendChild(z);
    }
}

customElements.define('my-comopnent', MyComponent);

我的问题是:如果模板定义为javascript字符串文字,如何在自定义组件中戳记模板?我可以在没有其他依赖项或npm库的情况下这样做吗?