Question

我试图了解香草网络组件的不同部分如何协同工作。我已经定义了一个简单的自定义组件，并尝试包含模板。我这样做是因为许多浏览器供应商不支持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不是函数我想这与我将模板定义为字符串的方式有关。

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

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

1 个答案: