"document.currentScript"및 "ownerDocument"란 무엇입니까?

Question

웹 구성 요소를 배우고 있습니다. 나는 전혀이 부분을 이해하지 못하는

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

: (document.currentScript||document._currentScript).ownerDocument이 currentScript 무엇

, ownerDocument 무엇

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

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

대신 : 템플릿을 잡기 위해, 나는이 작업을 수행하는 데 필요한 ? 목적은 무엇입니까? 왜 작동합니까? 위에 표시된 템플릿 코드는 link 요소를 통해 가져옵니다.

참고 :이 내용은 post이고이 내용은 article입니다. 나는 단지 키워드를 이해하려고 애쓰며, 특별히 염두에 두어야 할 문제는 없습니다. 여기에서 가져온

Answer 1

정의 : https://html.spec.whatwg.org/multipage/dom.html#dom-document-currentscript

document.currentScript

반환 스크립트 요소, 또는 SVG 스크립트 요소, 즉 한 요소가 고전 스크립트를 대표로, 현재을 실행 입니다. 재진입 스크립트 실행의 경우, 아직 실행이 완료되지 않은 스크립트 중에서 가장 최근에 실행을 시작한 스크립트를 반환합니다.

문서가 현재 스크립트 또는 SVG 스크립트 요소를 실행하고 있지 않은 경우 (예 : 실행중인 스크립트가 이벤트 처리기이거나 시간 초과이므로) 또는 현재 실행중인 스크립트 또는 SVG 스크립트 요소가 모듈 스크립트를 나타내는 경우 null을 반환합니다. .

그리고 나는 _currentScript이 Polyfill에서 유래했다고 믿습니다.

document 될 것이다 DOM 트리에서 아무것도에 대한 ownerDocument하지만, HTML 가져 오기 ownerDocument를 통해로드 <template> 또는 파일에 대한

은 다른 문서가 될 것입니다. 따라서 document.querySelector()은 HTML 가져 오기를 사용하여로드 된 파일의 <template>을 가져 오지 못합니다.

Answer 2

_currentScript은 이전 webcomponentsjs polyfill (버전 0.x)에서 사용되었습니다. 이제 polyfill 버전 1.x를 사용하는 경우 항상 undefined입니다.

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

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

document.currentScript.ownerDocument 당신에게 현재 <script>가 실행되고 <template> 어디에 정의 (<link rel='import'>로) 가져온 문서에 대한 참조를 줄 것이다 :

당신은 만 document.currentScript 사용해야합니다.

이 주제에 대한 자세한 내용은 this SO answer (및 this one)을 참조하십시오.