Web 组件将改变您认为已掌握的与 Web 构建相关的一切知识。有史以来第一次，网络将拥有低级 API，这让我们不仅可以创建自己的 HTML 标记，还可以封装逻辑和 CSS。不再需要全局样式表汤或样板代码！这是一个勇敢新世界，一切都是一个元素。
在我的 DotJS 演讲中，我将详细介绍 Web 组件提供哪些功能，以及如何使用新型工具构建这些组件。我将向大家展示 Yeoman，这是一个包含多种工具的工作流程，可简化使用 Polymer 创建网络应用的流程。Polymer 是一个 polyfill 库，包含 polyfill 和 Sug，可用于目前在现代浏览器中使用 Web 组件开发应用。
创建自定义元素并安装他人创建的元素
在本次讲座中，您将了解以下内容：
- 关于构成 Web 组件的四种不同规范：自定义元素、模板、Shadow DOM 和 HTML 导入。
- 如何定义自己的自定义元素并安装他人使用 Bower 创建的元素
- 减少编写 JavaScript 的时间，将更多时间用于构建页面
- 借助现代前端工具 (Yeoman)，使用 Polymer 与发电机聚合物为应用构建基础
- Polymer 如何在创建网络组件方面做出巨大改变。
例如，如需安装 Polymer 的 Web Component polyfill 和库本身，您可以运行以下代码行：
bower install --save Polymer/platform Polymer/polymer
这会添加一个 bower_components 文件夹，并添加上述软件包。--save 会将它们添加到应用的 bower.json 文件中。
稍后，如果您想安装 Polymer 的手风琴元素，则可以运行以下命令：
bower install --save Polymer/polymer-ui-accordion
然后将其导入您的应用：
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
为了节省时间，您可以使用 Yeoman 和下面的一行代码，为新 Polymer 应用构建您需要的所有依赖项、样板代码和用于优化应用的工具：
yo polymer
额外演示
我还录制了一段 30 分钟的奖励演示，演示了我在演讲中展示的 Polymer 点唱机应用。
奖励视频介绍了以下内容：
- “一切都是元素”这一口号的含义
- 如何使用 Bower 安装 Polymer 的 Platform polyfill 和元素
- 使用 Yeoman 生成器和子生成器为我们的 Jukebox 应用构建基架
- 了解通过样板建立的平台功能
- 如何将 Angular 应用移植到 Polymer。
我们还使用 Yeoman 子生成器为新的 Polymer 元素搭建基础。例如，为我们运行的 foo 元素创建样板文件：
yo polymer:element foo
这会提示我们是否希望自动导入该元素、是否需要构造函数以及满足一些其他偏好设置。
这两场演讲中展示的应用的最新源代码现已在 GitHub 上提供。我进一步对其进行了重构，使其更加井然有序，更便于阅读。
应用预览：
深入阅读
总而言之，Polymer 是一个 JavaScript 库，当我们等待 Web 组件以原生方式实现时，它现在可在现代网络浏览器中实现这些组件。现代工具有助于改进您的工作流程，您不妨使用 Yeoman 和 Bower 在开发自己的代码时试试。
您可以参阅有关该主题的一些其他文章：