3

我正在学习 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元素拉入的。

注意，这与这篇文章和这篇文章有关。我只是想了解关键字，我没有任何特别的问题。

4

2 回答 2

3

_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>定义。

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

于 2017-12-02T21:39:05.687 回答
2

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

document.currentScript

返回当前正在执行的脚本元素或 SVG 脚本元素，只要该元素表示经典脚本即可。在可重入脚本执行的情况下，返回尚未完成执行的脚本中最近开始执行的脚本。

null如果 Document 当前未在执行脚本或 SVG 脚本元素（例如，因为正在运行的脚本是事件处理程序或超时），或者当前正在执行的脚本或 SVG 脚本元素表示模块脚本，则返回。

我相信这_currentScript来自 Polyfill。

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

于 2017-11-21T18:27:37.850 回答