尝试在 html 导入中选择模板元素时获取 null

Question

在我的应用程序中，我从A进行html导入到具有此内容的文件B。但它的警报为空。如果我直接在浏览器中打开B，它会提醒模板 HTML dom 元素。这怎么可能发生，同样的代码几乎来自谷歌自己的 Web 组件文档 https://developers.google.com/web/fundamentals/architecture/building-components/customelements。

<template id="x-foo-from-template">
</template>
<script>
alert(document.querySelector('template'));
</script>

这是谷歌的例子：

<template id="x-foo-from-template">
<style>
p { color: orange; }
</style>
<p>I'm in Shadow DOM. My markup was stamped from a &lt;template&gt;.</p>
</template>
<script>
customElements.define('x-foo-from-template', class extends HTMLElement {
constructor() {
super(); // always call super() first in the ctor.
let shadowRoot = this.attachShadow({mode: 'open'});
const t = document.querySelector('#x-foo-from-template');
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
}
...
});
</script>

谢谢

Answer 1

为什么会这样？

导入包含script和template的文件时要考虑的两个因素：

1. script将在导入时执行，而标记和其他资源需要显式添加到主页
   • 正如这篇关于导入的文章所指出的(由Eric Bidelman撰写，与有问题的Google文档链接的作者相同(：

导入链接并不意味着">在此处 #include 内容"。它的意思是">解析器，停止获取此文档，以便我以后可以使用它"。当脚本在导入时执行时，样式表、标记和其他资源需要显式添加到主页。

导入
2. 中的脚本在包含导入文档的窗口的上下文中执行。 因此，window.document指的是主页文档，而不是模板文档。

这应该解释为什么您的脚本会发出警报null。因为脚本会立即执行，而模板尚未添加到主页。

如何获得预期的结果：

您可以创建对导入文档本身的引用，可在其中找到template。

// importDoc references this import's document
var importDoc = document.currentScript.ownerDocument;
alert(importDoc.querySelector('template'));

或者，您可以在将模板插入文档后查询主文档：

var import = document.querySelector('link[rel="import"]').import;
var template = import.querySelector('template');
// Append template to main document
document.head.appendChild(template);
// Now you can query the main the document
alert(document.querySelector('template'));

谷歌的例子与所讨论的例子有什么不同？

针对以下评论中的问题：

在 Google 的示例中，对document.querySelector()的调用位于自定义元素的构造函数中。实例化元素时调用构造函数。因此，运行此代码时，该元素已存在于主页中。