ウェブコンポーネント（バニラ、ポリマーなし）：ロード方法<template>コンテンツ？

ウェブコンポーネントの新機能です。私はいくつかの例を確認しましたが、別のWebコンポーネントの内容をロードする方法（DOMに挿入する方法）を実際に把握することはできません。 this例から始めて、私は私の-element.htmlという名前のファイルにこのコードを置く：私は、最新のクローム56によウェブコンポーネント（バニラ、ポリマーなし）：ロード方法<template>コンテンツ？

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>my titile</title> 
    <link rel="import" href="my-element.html"> 
</head> 
<body> 
    Does it work? 
    <my-element></my-element> 
</body> 
</html>

ので、私：

<template id="my-element"> 
    <p>Yes, it works!</p> 
</template> 
<script> 
    document.registerElement('my-element', class extends HTMLElement { 
     constructor() { 
     super(); 
     let shadowRoot = this.attachShadow({mode: 'open'}); 
     const t = document.querySelector('#my-element'); 
     const instance = t.content.cloneNode(true); 
     shadowRoot.appendChild(instance); 
    } 
}); 
</script>

これは私のindex.htmlですポリフィルを必要としません。私はポリセブを実行し、 "それは機能しますか？"表示されます。私は（元の例のように） "document.registerElement"の代わりに "customElements.define"構文を試しましたが、うまくいきません。いくつかのアイデアはありますか？そして、もし私がシャドードームを使いたくなければ、私は何を変えなければならないのですか？

document.querySelector('#my-element');

... documentはテンプレートを取得したい場合は、あなたがすべきメイン文書のindex.html

を指し：あなたが行うときためです

おかげ

出典

2017-02-07 Johannes

代わりに使用するdocument.currentScript.ownerDocument

var importedDoc = document.currentScript.ownerDocument; 
customElements.define('my-element', class extends HTMLElement { 
     constructor() { 
      super(); 
      let shadowRoot = this.attachShadow({mode: 'open'}); 
      const t = importedDoc.querySelector('#my-element'); 
      const instance = t.content.cloneNode(true); 
      shadowRoot.appendChild(instance); 
    } 
});

document.currentScriptはグローバル変数であるため、の場合は現在と解析された場合にのみ、インポートされたドキュメントを参照します。それは値が（ここでは：importedDoc）変数に保存されている理由です（constrcutor呼び出しで）後で再利用できるように

あなたが複数の文書をインポートした場合は、（としてはin this postを説明した）の閉鎖でそれを隔離することもできます。

を

(function (importedDoc) 
{ 
    //register element 
})(document.currentScript.ownerDocument);

出典

2017-02-07 15:17:07 Supersharp

ありがとうございます！したがって、 "document.registerElement"も正しくありません。 – Johannes

registerElement（）を使用する場合は、constructor（）をcreatedCallback（）に置き換える必要があります。しかし、新しい標準化されたバージョンのcustomElements.define（）を使用する方が良いでしょう。 – Supersharp

素晴らしい！ありがとうございます – Johannes

ウェブコンポーネント（バニラ、ポリマーなし）：ロード方法<template>コンテンツ？

答えて

関連する問題