javascript - What is "document.currentScript" and "ownerDocument"? - Stack Overflow

admin管理员组

文章数量:1403339

I am learning Web Components. To grab a template, I needed to do this:

<template>
  <div>The sky is blue</div>
</template>

<script>
    var tmpl = (document.currentScript||document._currentScript).ownerDocument.querySelector('template');

Instead of:

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

I don't understand this part at all: (document.currentScript||document._currentScript).ownerDocument

What is currentScript, what is ownerDocument? What is the purpose? Why does it work. Note that the template code I have shown above gets pulled in via the link element.

Note, this is related to this post and this article. I AM just trying to understand the keywords, I don't have any particular problem in mind.

I am learning Web Components. To grab a template, I needed to do this:

<template>
  <div>The sky is blue</div>
</template>

<script>
    var tmpl = (document.currentScript||document._currentScript).ownerDocument.querySelector('template');

Instead of:

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

I don't understand this part at all: (document.currentScript||document._currentScript).ownerDocument

What is currentScript, what is ownerDocument? What is the purpose? Why does it work. Note that the template code I have shown above gets pulled in via the link element.

Note, this is related to this post and this article. I AM just trying to understand the keywords, I don't have any particular problem in mind.

• javascript
• html
• dom
• web-ponent
• html5-template

Share Improve this question Follow edited Dec 16, 2017 at 18:29 Supersharp 31.3k1111 gold badges102102 silver badges147147 bronze badges asked Nov 21, 2017 at 18:06 VSOVSO 12.7k2828 gold badges116116 silver badges201201 bronze badges 1

• reddit./r/learnjavascript/ments/10i4xmn/ment/j5d5mlr/… – aderchox Commented Jan 22, 2023 at 7:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Definition taken from here: https://html.spec.whatwg/multipage/dom.html#dom-document-currentscript

document.currentScript

Returns the script element, or the SVG script element, that is currently executing, as long as the element represents a classic script. In the case of reentrant script execution, returns the one that most recently started executing amongst those that have not yet finished executing.

Returns null if the Document is not currently executing a script or SVG script element (e.g., because the running script is an event handler, or a timeout), or if the currently executing script or SVG script element represents a module script.

And I believe that _currentScript es from a Polyfill.

The ownerDocument for anything in the DOM Tree will be document but for a <template> or a file loaded through an HTML Import the ownerDocument will be a different document. This is why document.querySelector() won't work to get the <template> of a file loaded using an HTML Import.

_currentScript was used in the old webponentsjs polyfill (version 0.x). Now if you use polyfill version 1.x it is always undefined.

You should then use only document.currentScript:

<template>
  <div>The sky is blue</div>
</template>

<script>
    var tmpl = document.currentScript.ownerDocument.querySelector('template');
</script>

document.currentScript.ownerDocument will give you a reference to the imported document (with <link rel='import'>), where the current <script> is running and where the <template> is defined.

See this SO answer (and this one) for further details on this topic.

本文标签： javascriptWhat is quotdocumentcurrentScriptquot and quotownerDocumentquotStack Overflow