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

Question

我正在尝试了解 vanilla 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/cloneNodecloneNode是在Node接口上的方法。

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

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

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

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

custom components - how to clone html template defined as js string literal?

javascript

templates

custom-component

web-component