HTML<；模板>；在Firefox中为空（devtools和document.importNode（）之后）

我想使用html模板。使用Chrome一切正常，但在Firefox中模板元素没有任何内容。。。也许它只是没有显示在调试器中，但是当我尝试实例化模板的内容时，我也没有得到任何内容

此模板元素：

。。。
克沃茨
...

---

在Firefox调试器中检查元素时没有任何内容（我希望是“qwertz”）。看起来很简单。。。但不幸的是，我看不到我在这里遗漏了什么…

Firefox的devtools Inspector没有在其DOM视图的主窗口中显示

模板

内容

如果您想在Firefox的Inspector中检查

模板
内容，您需要：

右键单击Inspector中的
模板
元素
选择“显示DOM属性”
Firefox开发工具将向您显示属性窗格，您可以在其中浏览
模板
元素的所有DOM属性

因此，您可以通过查看
innerHTML
属性，或通过
content
属性向下查看
模板
内容




关于如何实例化模板的内容，这里有一个简单的示例：


var templateContent=document.querySelector（“模板”）.content，
templateContentClone=document.importNode（templateContent，true）
document.body.appendChild（templateContentClone）

克沃茨
就是这样。“HTML元素是一种保存客户端内容的机制，在加载页面时不会呈现这些内容，但随后可能会在运行时使用JavaScript进行实例化。”你也不应该在Chrome中看到任何内容。Chrome中的调试器在名为#document fragmentMy bad，我以为您在谈论呈现的DOM。我使用JavaScript来实例化模板。我可以获取模板元素本身，但它没有任何内容。我只是注意到，如果我删除polyfill
webcomponents lite.js
，模板的内容是可见的（在DOM属性中）。我不知道为什么。我不知道为什么polyfill会有这种效果，但为了得到答案，你可能想单独发布一个问题，原因是我的错误。我有一个自定义的ShadowDOM元素。这个自定义元素有一个名为
shadowRoot
的属性的setter和getter。我不知道的是，HtmleElement的Polyfill也有这个属性，所以我意外地重载了setter/getter。去掉这个之后，一切都正常了。