シャドウDOMに<content>タグを使用する

Question

私はシャドウ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ファイルとして実行することができます）