どのようにバニラjsで自己完結型カスタム要素のテンプレートをスタンプする？

Question

私はタロットカードを表示するだけのカスタムコンポーネントを持っています。 カスタム要素の前にテンプレートを定義しました。
私の接続されたコールバックでは、私はshadowrootにテンプレート自体を添付し、shadowrootにそれを複製することによってそれをスタンプしました。私は次の2つの理由でこれを行いました：

1. 自分のコンポーネントが自己完結型モジュールであることを望みます。私のカスタム要素と同じ場所にテンプレートを定義したいと思います。

2. 私のテンプレートをスタンプしてオーナー文書に貼り付けることなく使用できるようにする唯一の方法と思われます。

   var tmpl = ` 
       <template id="tmpl"> 
       <h1 class="tarot-title"><slot name="title">NEED TITLE</slot> 
       </h1> 
       <img src="${this.imageurl}" alt=""> 
       <p><slot name="subtitle">NEED A SUBTITLE</slot></p> 
   </template>`; 
   
   
   
   class BdTarot extends HTMLElement { 
   
       ...constructor etc... 
   
       connectedCallback() { 
        this._shadowRoot.innerHTML = tmpl; 
        var _tmpl = this._shadowRoot.querySelector('#tmpl'); 
        this._shadowRoot.appendChild(_tmpl.content.cloneNode(true)); 
   
       } 
   
   } 
   
   customElements.define('bd-tarot', BdTarot); 
   

これが作成した問題は、私は私のページで使用すべてのタロットカードコンポーネントは、同じテンプレートが同じIDを持つ子供、すべてでありです。彼らはシャドウルートにいるので、それは重要ですか？しかし、面白いにおい...

私の目標は、Webコンポーネントの仕様がどのように合っているかを理解しようとすることです。私の質問は、私のコンポーネントコードを一緒に保持し、オーナーのドキュメントに戻って参照しないでこれを行うための良い方法はありますか？ HTMLのインポートはほとんどのブラウザベンダーで採用されていないため、テンプレートの仕様はカスタム要素とほとんど互換性がありませんか？

Answer 1

簡潔に：template literalsを使用する場合は、<template>要素を使用しないでください。

カスタム要素とテンプレートコードを一緒に保持するために、テンプレートを複製する必要はありません。

自己実行関数にコードを囲むだけで、tmpl変数がオーバーライドされないようにすることができます。

(function() { 
 

 
var tmpl = ` 
 
    <h1 class="tarot-title"><slot name="title">NEED TITLE</slot></h1> 
 
    <img src="${this.imageurl}" alt=""> 
 
    <p><slot name="subtitle">NEED A SUBTITLE</slot></p>`; 
 

 

 
class BdTarot extends HTMLElement { 
 
    constructor() { 
 
     super()  
 
     this.attachShadow({ mode: 'open' }) 
 
      .innerHTML = tmpl; 
 
    } 
 
} 
 

 
customElements.define('bd-tarot', BdTarot); 
 

 
})()

<bd-tarot> 
 
<span slot="title">Queen</span> 
 
</bd-tarot>

テンプレートのローカルコピーを保持したい場合は、インスタンス変数（this.tmpl）にそれをコピーすることができます。