在阴影中使用<content>标记DOM

Question

我试图使用没有任何抽象它的框架的影子DOM，主要是为了了解它的错综复杂。我正在使用webcomponents.js填充，因此它可以跨浏览器工作。

我已经设法创建了一个自定义元素，并设置了它的影子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> 

（这个例子是完整的，可运行作为一个完整的HTML文件，只要你有webcomponents-lite.min.js可用，或可在不.js文件在支持的浏览器中运行）