자바 스크립트에서 그림자 DOM 템플릿 정의하기

Question

그림자 DOM으로 요소를 만들고, 결국 사용자 정의 요소에서 사용합니다. 내 HTML 파일은 이미 약간 부풀어 오르기 때문에 내 HTML 본문에서 템플릿을 참조하는 대신 자바 스크립트로 내 모든 템플릿을 이동하는 것이 이상적입니다.

나는 그렇게 위해이 방법을 시도 :

var template = document.createElement('template'), 
    div = document.createElement('div'); 

div.textContent = 'foo'; 
template.appendChild(div); 

var shadow = document.body.appendChild('div').createShadowRoot(); 

shadow.appendChild(template.content.cloneNode()); 

그러나, 이것은 NotFoundError가 발생합니다. 더 깊게 파고 들면 template.content가 단지 #documentFragment으로 정의되어있는 것처럼 보입니다. 문제가 될 수있는 것 같지만 그림자 dom 또는 템플릿에 대해서는 충분히 알지 못합니다.

내 코드에 버그가 있습니까? 아니면 자바 스크립트에서 템플릿을 만드는 더 좋은 방법이 있습니까?

Here is my test fiddle.

Answer 1

첫째,이 호출은 잘못되었습니다

var mountingPoint = document.createElement('div'); 
document.body.appendChild(mountingPoint); 

가 <template>은 다음과 같습니다

document.body.appendChild('div') 

당신은 그림자 DOM을 장착하기 위해, DOM의 일반 요소를 필요 content이라는 이름의 문서 조각을 포함하는 요소 :

이 인터페이스는 웹 구성 요소에도 유용합니다. < 템플릿 > 요소는 HTMLTemplateElement.content 속성에 DocumentFragment를 포함합니다.

template.content.appendChild(div); 

는 또한 크롬, 방법 cloneNode의 첫 번째 매개 변수 deep로 truedefault is false 때문에이어야합니다 : (Source: MDN)

그래서, 당신과 함께 template.appendChild(div);을 대체 할 수있다.

template.content.cloneNode(true); 

그러나 <template> 요소는 필요하지 않습니다. 직접 만든 DIV를 사용하십시오.

var div = document.createElement('div'); 
div.textContent = 'foo'; 

var mountingPoint = document.createElement('div'); 
document.body.appendChild(mountingPoint); 

var shadow = mountingPoint.createShadowRoot(); 
shadow.appendChild(div);