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

Question

我正试图了解香草网络组件的不同部分是如何协同工作的。我已经定义了一个简单的自定义组件，并试图包含一个模板。我这么做是因为许多浏览器供应商并不支持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);

我得到的错误是: cloneNode不是一个函数，我认为它与我将模板定义为字符串的方式有关。

我的问题是:如何在自定义组件中将模板定义为javascript字符串文本？如果不需要额外的依赖项或npm库，我可以这样做吗？

Answer 1

查看https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode cloneNode是Node接口上的一种方法。

在您的代码中，tmpl不是Node，而是string。

您需要在代码的顶部执行这样的操作：

let tmpl = document.createElement('template');
tmpl.innerHTML = `
<h1>header</h1>
<p>copy</p>
`;