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

Question

我试图了解原版 Web 组件的不同部分如何协同工作。我已经定义了一个简单的自定义组件，并试图包含一个模板。我这样做是因为许多浏览器供应商不支持 html 导入并转而使用 es6 模块。这是我的网络组件：

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);

我得到的错误是 Uncaught Type Error: cloneNode is not a function 我想这与我将模板定义为字符串的方式有关。

我的问题是：如何在模板被定义为 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>
`;