在陰影中使用<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文件在支持的瀏覽器中運行）