Shadow DOM获取Shadow host的内容

在Shadow DOM（二）中，介绍了与Shadow DOM相关的概念，包括Shadow host等等。

本文将重点介绍如何将Light DOM中的内容传到Shadow DOM中。

而在Shadow DOM 与HTML Templates一文的示例中可以看到Shadow host： <div class="host">Hello World!</div>的内容在该节点创建并附加Shadow Root后并没有在浏览器中得到渲染，也就是说Shadow host的内容，这里为“Hello World!"没能在浏览器中渲染出来，取而代之的是Shadow DOM中的内容得到了渲染，及该例中的template中的内容得到了渲染，然后在浏览器中运行后，只看到了Shadow DOM中的内容。

然后，在实际应用中，这种完全用Shadow DOM替换Light DOM中内容的方式并不是很有用，我们期望实现的可以通过从Shadow host中获取内容，然后使用Shadow DOM提供的结构来展现。类似这样的内容与展现分离，可以让我们在处理页面如何渲染的过程中更加灵活。

为了能够使用我们在Shadow host的内容，我们需要引入一个新的标签，那就是<content>标签。

首先通过一个示例来了解：

<