Web 组件简介编写可以复用的 HTML 模板（本文）从 0 开始创建自定义元素使用 Shadow DOM 封装样式和结构Web 组件的高阶工具

 

　　Web 组件规范中最不被认可但是最强大的功能之一是  元素。在这个系列的第一篇文章中，我们将这种模板元素定义为『仅在调用时才渲染的用户自定义 HTML 模板』。换句话说，模板就是一种当浏览器被告知时才执行的 HTML 代码，其他情况下是被忽略的。

 

　　这种模块可以通过许多有趣的方式去传递和应用。基于本文的目的，我们将看下如何为一种最终应用到自定义元素中的对话框创建模板。

 

　　就像它听起来这样简单，一个  是一种 HTML 元素，所以一个含内容的模板所具备的最基本形式如下：

 

　　在浏览器中运行这段代码会显示空白页面，因为浏览器并没有渲染模板元素内容。这种方式的强大之处在于它允许我们保存自定义内容（或内容结构），以供后续使用，而不需要使用 JavaScript 来动态编写 HTML 代码。

 

　　为了使用模板，我们 将 需要用到 JavaScript。

 

　　真正神奇的地方在于  方法。这个函数将会为模板的  创建一份副本，并且做好将拷贝插入其他文档（或文档片段）的准备。函数的第一个参数获取到模板的内容，第二个参数告诉浏览器要对元素的 DOM 子树做一份深度拷贝（也就是拷贝它的所有子节点）。

 

　　我们可以直接使用 ，但是这样做的话，我们随后需要把内容从元素中移除并将它拼接到其他文档的 body 部分。任何 DOM 节点仅可以被接入到一个位置，所以随后对模板内容的使用将会导致空文档片段（基本上是一个空值），因为之前已移动了内容对象。使用  允许我们在不同的位置来复用同一个模板内容的实例。

 

　　以上代码执行后，节点内容会被拼接到  对象，并被渲染显示给用户。这样最终使我们能够做许多有趣的事情，比如为我们的用户（或者我们程序的消费者）提供创建内容的模板，类似下面的 demo，在第一篇文章我们讨论过：

 

　　请参阅笔记模板样例，来自 CodePen 的 Caleb Williams （@calebdwilliams）。

 

　　这个例子中，我们提供了两个模板来渲染同样的内容 —— 作者和他写的书。当表格变化时，我们选择渲染与该变化值相关联的模板。使用相同的技术允许我们最终创建一个自定义元素，该元素将使用稍后定义的模板。

 

　　模板中一个有趣的点是我们可以包含 任意 HTML，包括脚本和样式元素。一个非常简单的模板例子是添加一个可以提示被点击的按钮。

 

　　让我们加点样式：

 

　　…然后通过一个非常简单的脚本来调用按钮：

 

　　当然，我们可以直接使用  和  标签来将他们放在同一个文件中，而非放在分离的文件中：

 

　　一旦这个元素被加入到 DOM 结构中，我们会看到一个 ID 为  的新按钮，一个全局的 CSS selector 被绑定到这个按钮的 ID，一个简单的事件监听回调函数会提示元素的点击事件。

 

　　至于我们的脚本，我们仅需使用  来拼接内容，并且我们有一个包含大致内容的 HTML 模板，在页与页之间可以复用。

 

　　请参阅笔记包含脚本和样式的模板例子，来自 CodePen 的 Caleb Williams （@calebdwilliams）。

 

　　回到我们编写一个对话框元素这个任务，我们希望定义自己的模板内容和样式。

 

　　这段代码将成为我们对话框的基础部分。简单介绍一下，我们有一个全局的关闭按钮，一个标题和一些内容。我们也添加了一些行为来实现可视化触发对话框（尽管它还无法被访问）。不幸的是，样式和脚本内容并非仅限作用于我们的模板，而是应用于整个文件，当我们将多个模板实例添加到 DOM 时，并没有产生理想的中的效果。在下篇文章中，我们将应用自定义元素f生成方法并创建我们自己的元素，实时使用该模板并封装元素的行为。