这篇文章简单介绍 Web Component 标准，介绍哪些浏览器已经开始支持 Web Components，讨论 Web Components 能解决什么问题，以及它对 Web 开发的重要性。你可以了解到如何利用 Vanilla Javascript 编写一个简单的 Web Component，我还会针对它的潜在优势分享我自己的一些拙见。

众所周知，Web 页面是由 HTML+CSS+JavaScript 三板斧配合而成的，这体现了一种结构、表现、交互分离的思想。但是随着 Web 应用不断丰富，过度分离的设计也会带来可重用性上的问题。于是各家显神通，各种 UI 组件工具库层出不穷，煞有八仙过海之势。于是 W3C 坐不住了，大手一挥，说道：不如让我们统一一个 Web Components 的标准吧怎么样。

最近将大部分时间花在了Web Components上面，不过这些花费的时间是有价值的。我整理了一个小组件，能更好的帮助大家更好的理解一个整体的Web Components。Web Components是一种新兴技术，用来规范组件的定制，这些都要非常感谢W3C组织。Web Components的目的就是允许开发人员使用HTML、CSS和JavaScript来自定义元素。这些元素可以被认为是一些小部件（widgets）。

最近我们开始在Onsen UI上使用Web Components API。API为开发人员提供了创建新的或扩展HTML标签元素的能力。我们重新使用Web Components API写一些简单的Onsen UI组件，但我们不会停止脚步，我们会继续努力。在这篇教程中我们将看看如何使用Web Components API实现一个简单的组件。我们将要学习的Web组件称为"favorite button / favorite star"。

在 Web 开发领域中，模板这个概念并不新鲜。实际上，服务端的模板语言/引擎，比如 Django (Python)，ERB/Haml (Ruby)，和 Smarty (PHP) 早已应用多时。近些年来，众多 MVC 框架蓬勃涌现。这些框架各有特色，但绝大多数在展现层(即：视图层)都使用同样的渲染机制：模板。

HTML 是 Web 平台最重要的元素。它提供了各种构造站点和应用程序的底层特性。但是，一旦你开始用原生 HTML 标签实现一个复杂的组件，很容易就会变成 div 标签的堆砌。假如 Web 平台允许你创建自己的原始组件会怎样？假如你可以随意选择标签名会怎样？加入你可以扩展已有 HTML 标签的特性会怎样？自定义元素（Custom Elements）就允许你做这些事情。

HTML规范有一个令人感到兴奋的功能可以自己自定义HTML元素。这允许你可以根据自己的JavaScript API创建自己的HTML元素。这在整个应用程序中构建接口和组件重用可能是非常有用的。在这篇文章中你可以学习到如何自定义自己的HTML元素和定义他们需要的JavaScript API。我们开始吧。

这篇文章主要跟着@David East的《HOW TO BUILD A SIMPLE CAMERA COMPONENT》 学习。学习如何使用MediaDevices API获取摄像头的访问权限，然后将相关的流通过video元素来播放。并且将视频流通过canvas元素转换为blob或base64格式的图片。并且依赖于自定义元素将这些功能封装成一个简单的摄像机组件。感兴趣的同学，请继续往下阅读。