什么是"document.currentScript"和"ownerDocument"？

Question

我正在学习Web组件。要获取模板，我需要这样做：

<template>
  <div>The sky is blue</div>
</template>
<script>
    var tmpl = (document.currentScript||document._currentScript).ownerDocument.querySelector('template');

而不是：

var tmpl = document.querySelector('template');

我根本不明白这部分： (document.currentScript||document._currentScript).ownerDocument

什么是currentScript，什么是ownerDocument？什么目的？它为什么起作用。请注意，我上面显示的模板代码通过link元素被拉入。

请注意，这与本文和本文有关。我只是想理解关键字，我没有任何特定的问题。

Answer 1

_currentScript在旧的WebComponentsjs polyfill（版本0.x）中使用。现在，如果您使用polyfill版本1.x，它始终是undefined。

然后，您应该仅使用document.currentScript：

<template>
  <div>The sky is blue</div>
</template>
<script>
    var tmpl = document.currentScript.ownerDocument.querySelector('template');
</script>

document.currentScript.ownerDocument将为您提供对导入文档（带有<link rel='import'>）的引用，其中当前<script>正在运行以及定义<template>的位置。

有关此主题的更多详细信息，请参见此答案（和此）。

Answer 2

从这里获取的定义：https://html.spec.whatwg.org/multipage/dom.html#dom-document-currentscript

document.currentScript

只要元素代表经典脚本，返回当前执行的脚本元素或SVG脚本元素。如果是重新进入脚本执行，则返回最近开始执行的脚本的脚本。

如果文档当前没有执行脚本或SVG脚本元素（例如，因为运行脚本是事件处理程序，或者超时），或者当前执行脚本或SVG脚本元素代表模块脚本，则返回null。

我相信 _currentScript来自多填充。

DOM树中任何内容的ownerDocument将为document，但对于<template>或通过HTML加载的文件导入ownerDocument将是不同的文档。这就是为什么document.querySelector()无法使用HTML导入加载的文件的<template>。