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

2

ここからの定義: https://html.spec.whatwg.org/multipage/dom.html#dom-document-currentscript

document.currentScript

要素がクラシック スクリプトを表している限り、現在実行中のスクリプト要素または SVG スクリプト要素を返します。再入可能なスクリプト実行の場合、実行が完了していないスクリプトのうち、最後に実行を開始したものを返します。

nullDocument が現在スクリプトまたは SVG スクリプト要素を実行していない場合 (たとえば、実行中のスクリプトがイベント ハンドラーまたはタイムアウトのため)、または現在実行中のスクリプトまたは SVG スクリプト要素がモジュール スクリプトを表す場合を返します。

そして、それ_currentScriptは Polyfill に由来すると思います。

ownerDocumentDOM ツリー内のすべての場合は になりますが、HTML インポートを介してロードされdocumentた<template>または ファイルの場合ownerDocumentは、別のドキュメントになります。これが、HTML インポートを使用してロードされたファイルのdocument.querySelector()を取得できない理由です。<template>

于 2017-11-21T18:27:37.850 に答える