模板内容是一个空文档片段

Question

不是的副本 - Angular 中的错误，而我的问题是关于 Vanilla Js。

我正在开发 ThingsBoard widget. In the HTML tab，我有这个简单的模板：

<template id="myTemplate">
  <div>Test</div>
</template>

在 JS 选项卡中，我试图获取此模板的内容（最终克隆它）：

const template = document.querySelector("#myTemplate");
console.log(template.content);

但是，我得到一个空 DocumentFrgament：

这很奇怪，因为当我运行它在 ThingsBoard 之外时（例如这里的 Whosebug 片段），我 do 获取模板的内容：

const template = document.querySelector("#myTemplate");
console.log(template.content);

<template id="myTemplate">
  <div>Test</div>
</template>

有什么想法吗？

Answer 1

如果您的 ThingsBoard 示例使用的是 React 或类似的 DOM 库，它可能会以编程方式创建 DOM，这可能会导致此问题。

当使用 appendChild 以编程方式构造 <template> 时，content 保持为空。例如：

const template = document.createElement('template');
template.appendChild(document.createElement('div'));
console.log(template.content); // #document-fragment (empty)

您必须使用 template.content.appendChild 而不是 template.appendChild 才能正常工作。

希望这对您有所帮助！

模板内容是一个空文档片段

Template content is an empty document fragment

html

javascript

thingsboard