<content> 태그를 그림자 DOM에 사용하기

Question

그림자 DOM을 추상화하는 프레임 워크없이 그림자 DOM을 사용하려고합니다. 주로 그 복잡한 내용을 배우기 위해서입니다. webcomponents.js polyfills를 사용하고 있으므로 크로스 브라우저에서 작동합니다.

사용자 정의 요소를 만들고 그림자 DOM을 설정했지만 어떤 이유로 <content></content> 태그가 예상되는 콘텐츠를 전달하지 않습니다.

나는이 예제

Shadow DOM 
Hello world 
More Shadow 

로 렌더링 할 것으로 예상하지만 내가 여기 실종 무엇

Shadow DOM 
More Shadow 

로 렌더링?

<script src="webcomponents-lite.min.js"></script> 

<test-component> 
    <div>Hello world</div> 
</test-component> 

<template id="test-component"> 
    <div>Shadow DOM</div> 
    <content></content> 
    <div>More shadow</div> 
</template> 

<script> 
    class TestComponent extends HTMLElement { 
     constructor() { 
      super(); 

      var shadow = super.attachShadow({ mode: 'open' }); 

      var template = document.getElementById('test-component'); 
      var clone = document.importNode(template.content, true); 
      shadow.appendChild(clone); 
     } 
    } 

    customElements.define('test-component', TestComponent); 
</script> 

(예는 webcomponents-lite.min.js 사용할 수 있고, 또는 지원되는 브라우저에서의 .js 파일없이 실행할 수 있습니다 제공, 완료 및 전체 HTML 파일로 실행할 수 있습니다)