html5 图形组件,HTML5 组件: 实现标准组件

关于本系列

HTML5 的标准 UI 组件模型目前仍正不断演变。在本系列文章中，HTML5 专家 David Geary 将向您展示如何使用现有技术创建您自己的专属 HTML5 组件，以及如何利用现有的规范定义一个真实的 HTML5 组件系统。

在这个由三部分组成的系列文章的前两部分中，您已经学习了如何实现一个专属 HTML5 滑块组件。该组件提供了许多复杂功能；例如，当用户单击轨道时，该组件会使用 CSS3 转换顺畅地为滑块旋钮制作动画效果。但从用户角度来看(正如您在第 1 部分中看到的)，在应用程序中使用它没有在内置 HTML 元素中使用它那样简单。

要使用这个专属滑块，您必须：向您的 HTML 添加一个空的 DIV。

创建一个新的 COREHTML5.Slider。

将您在第二步创建的滑块附加到第一步创建的空的 DIV中。

实现事件处理程序，以便将控制权转交给滑块。

除了难以使用之外，该专属滑块还容易被滥用，无论是有意的还是无意的。任何人都可以访问这个滑块的元素，因为(几乎和当今其他所有 JavaScript 专属组件一样)滑块可直接将它们添加到 DOM 树中。

专属组件

专属组件是一个无需遵循标准 API 来实现组件的组件。

理想的做法是减少先前的步骤，仅 将滑块标记添加到 HTML中。在本文中，您所要做的就是，使用以下 API 将专属滑块转换成为标准的 HTML5 组件：Shadow DOM：Shadow DOM API 支持您将元素添加到通过常用方法(比如 document.getElementById())无法访问的 DOM 树。Shadow DOM 中的元素隐藏在暗处；它们对 DOM 树其他部分实际上是不可见的，在默认情况下，它们不受周围文档中的 CSS 的影响。

模板：HTML5 模板是一个惰性文档片段。当您需要显示这些片段时，可以 压制(stamp out)(意思是 创建)该模板，让片段出现在 DOM 树中。这些模板允许您封装那些您可以创建和定制的 HTML、JavaScript 和 CSS。

定制元素定制元素是组件的标签。定制组件的标签必须包含一个连字符(例如 )，除此之外，它们与内置 HTML 标签没什么区别。

HTML 导入：HTML 导入允许您从一个 HTML 文件中导入另一个，这使得您可以在其自身文件中实现定制组件。

这些 API 目前仍正开发中。撰写文本之时，还没有浏览器支持所有这些 API。因此，如果现在开始实现 HTML5 标准组件，那么可以从 Polymer 和 X-Tags 这两个开源项目中进行选择，它们提供了缺失的功能。

本文向您展示了如何：

HTML 5 专题

HTML5 代表了 Web 业务和云业务在实现方式上的里程碑式改变。本HTML 5专题将顺应潮流为您介绍一些和 HTML5 新特性相关的内容，及其炫酷的效果。在 Shadow DOM 中封装组件标记。

从惰性 HTML 模板中创建活动 DOM 元素。

创建定制元素并将它们连接到 JavaScript。

导入 HTML 文件。

使用 Polymer 实现组件。

使用 X-Tags 实现组件。

仅适用于 Chrome

在撰写本文时，Shadow DOM 示例只能在最新版的 Chrome 浏览器

中运行。

Shadow DOM

图 1 显示了一个正在播放视频的 HTML5 应用程序，以及 Chrome 的 Element 检查器(在 Tools->Developer tools下提供)，该检查器将显示 video元素内的元素：

图 1. 查看 video元素的内部

请注意，尽管 video元素显然包含一个播放 / 暂停按钮、进程指示器和其他元素，但 Element 检查器显示 video元素内部只有一个 source元素。您看不见它们，因为它们位于 Shadow DOM 中，默认情况下是看不见的。图 2 展示了如何在 Chrome 的 Element 检查器中显示 Shadow DOM 元素：

图 2. 在 Chrome 中启动 Shadow DOM

要得到 图 2所示的设置对话框，单击 Chrome 开发人员工具窗口右下角的齿轮图标。向下滚动 Show Shadow DOM 复选框。在选中该复选框时，Chrome 的 Element 检查器显示了 Shadow DOM 中的元素，如图 3 所示：

图 3. 查看 video元素的 Shadow DOM

图 3和 图 1一样，显示了 video元素中的元素，但这一次 video元素的内部构件是可见的，因为 Chrome 正在显示 Shadow DOM 元素。

Shadow DOM(直到近期才向浏览器实现者提供)已被证明对开发人员非常有用，因为在默认情况下，Shadow DOM 元素是不可访问的，而且不受周围 DOM 树的影响。因为从本质上讲，它们封装在自己的世界中，其他组件不会影响它们的工作方式。

图 4 显示了一个人为示例 (contrived example) 的结果，该示例展示了如何将元素放入 Shadow DOM：

图 4. 改变按钮的影子根 (shadow root)

该应用程序开始看起来如 图 4左边的屏幕截图所示，只显示一个标题和一个按钮。如果单击该按钮，那么应用程序将会使用图片和字幕替换文本(如右边屏幕截图所示)，图片和字幕位于按钮的 Shadow DOM 中。

清单 1 显示了应用程序的 HTML，如 图 4所示：

清单 1. 填充按钮的 Shadow DOM

Shadow DOM

button {

font: 18px Century Schoolbook;

border: thin solid gray;

background: rgba(200, 200, 200, 0.5);