リンクされたjavascriptファイル内からカスタム要素にアクセスするにはどうすればよいですか？

Question

私が持っていた場合、私はconstructor()にthisに同等であるカスタム要素にアクセスする方法をmain.js内からこの

<template id="x-foo-from-template"> 
    <script src="/js/main.js"></script> 
</template> 

<script> 
    customElements.define('my-header', class extends HTMLElement { 
     constructor() { 
      super(); 
      let shadowRoot = this.attachShadow({mode: 'open'}); 
      const t = document.currentScript.ownerDocument.querySelector('#x-foo-from-template'); 
      const instance = t.content.cloneNode(true); 
      shadowRoot.appendChild(instance); 

      // set up title 
      var title = this.getAttribute("title"); 
      var div = document.createElement("div"); 
      div.innerText = title; 
      shadowRoot.appendChild(div); 
     } 
    }); 
</script> 

のようなスクリプト？

おかげ

Answer 1

this threadで説明したように、あなたが行うことはできません。currentScriptプロパティはnullを返します。

<template>の外にスクリプトをロードし、カスタム要素のコールバックconnectedCallback()またはconstructor()からスクリプトで定義された関数を呼び出す必要があります。

Answer 2

コンポーネントの外側にあるcurrentScriptにアクセスする必要があります。私はこれを使用します：

var frag = (document.currentScript||document._currentScript).ownerDocument.querySelector('template').content; 

私は(document.currentScript||document._currentScript)を使用してポリフィルを処理します。

次に、あなたのコンストラクタであなたが使用します。

const instance = frag.cloneNode(true); 

この時点fragでdocument-fragmentあると子供の任意の数を含めることができます。これらはすべてcloneNodeの呼び出しによって複製されるため、Webコンポーネントの各インスタンスには独自のDOMコピーがあります。