바닐라 js가있는 자체 포함 된 사용자 정의 요소에서 템플릿을 스탬프 처리하는 방법은 무엇입니까?

Question

타로 카드를 보여주는 맞춤 구성 요소가 있습니다. 사용자 지정 요소 전에 템플릿을 정의했습니다.
wc의 connectedCallback에서 shadowroot에 템플릿 자체를 첨부하고 shadowroot에 복제하여 템플릿을 찍었습니다. 나는 두 가지 이유로 이것을했다 :

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를 가진 아이, 전부이다 가지고있다. 그들은 어둠의 길에 있기 때문에 중요합니까? 웃긴 냄새가 난다.

나의 목표는 단순히 웹 구성 요소 사양이 모두 어떻게 어울리는지를 이해하려고하는 것이다. 내 질문은, 내 구성 요소 코드를 함께 유지하고 소유자가 의사에게 다시 참조하지 않는이 작업을 수행하는 더 좋은 방법은 무엇입니까? 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)에 복사 할 수 있습니다.