사용자 지정 구성 요소 - js 문자열 리터럴로 정의 된 html 템플릿을 복제하는 방법?

Question

바닐라 웹 구성 요소의 여러 부분이 어떻게 작동하는지 이해하려고합니다. 간단한 사용자 지정 구성 요소를 정의하고 템플릿을 포함하려고합니다. 많은 브라우저 공급 업체가 HTML 가져 오기를 지원하지 않고 대신 es6 모듈을 사용하기 때문에이 작업을 수행하고 있습니다.

var tmpl = `<template> 
<h1>header</h1> 
<p>copy</p> 
</template>`; 

class MyComponent extends HTMLElement { 
    constructor() { 
     super(); 
    } 
    connectedCallback() { 
     let z = tmpl.cloneNode(true); 
     this.appendChild(z); 
    } 
} 

customElements.define('my-comopnent', MyComponent); 

내가 오류가 처리되지 않는 유형의 오류입니다 : : cloneNode 나는 그것이 내가 문자열로 내 템플릿을 정의하고 길을 함께 할 수있는 뭔가가 상상하는 기능 하지 않습니다 여기 내 웹 구성 요소입니다.

내 질문은 : 템플릿을 자바 스크립트 문자열 리터럴로 정의한 사용자 지정 구성 요소에서 내 템플릿을 어떻게 스탬프합니까? 추가 의존성이나 npm 라이브러리없이 그렇게 할 수 있습니까?

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNodecloneNode은 Node 인터페이스에있는 방법입니다.

코드에서 tmpl은 Node이 아니라 string이 아닙니다. (1)`template`가되었다하지 innerHTML을에 .. - 편집 괜찮습니다,

let tmpl = document.createElement('template'); 
tmpl.innerHTML = ` 
<h1>header</h1> 
<p>copy</p> 
`;