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

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

2 Answers 2

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.