你的前端框架要被 Web 组件取代了

还记得 document.querySelector 开始获得主流浏览器支持，并逐渐结束 jQuery 统治的历史吗？ 它终于让我们能够原生实现多年来使用 jQuery 做的事情，也就是轻松选择 DOM 元素。我相信类似的变革也会席卷像 Angular 和 React 这样的前端框架。
这些框架让我们得以实现过去难以达成的目标，亦即创建可复用的自治前端组件；但随之而来的代价是代码更加复杂、需要专用语法和更多的负载压力。
但这种情况即将改变。
现代 Web API 已发展到不再需要框架就能创建可复用前端组件的程度。只需要自定义元素和 Shadow DOM 就足够创建可在任何地方重复使用的自治组件了。
于 2011 年面世的 Web Components 是一套功能组件，让开发者可以使用 HTML、CSS 和 JavaScript 创建可复用的组件。这意味着你无需 React 或 Angular 等框架也能创建组件。不仅如此，这些组件还都可以无缝集成到这些框架中。
有史以来头一次，我们只要使用 HTML、CSS 和 JavaScript 就能创建可在任何现代浏览器中运行的可复用组件了。现在，桌面平台的 Chrome、Safari、Firefox 和 Opera，iOS 上的 Safari 和 Android 上的 Chrome 最新版本都支持 Web Components。
Edge 浏览器将在即将发布的 19 版中提供支持。还有一个polyfill用来兼容老旧的浏览器，可以让 Web Components 与 IE11 兼容。
这意味着你现在可以在任何浏览器，包括移动设备中使用 Web Components。
你可以创建自定义的 HTML 标签，这些标签继承了它们扩展的 HTML 元素的所有属性，只需导入脚本即可在任何支持的浏览器中使用。组件内定义的所有 HTML、CSS 和 JavaScript 都完全限定在组件内部。
该组件将在浏览器的开发工具中显示为单个 HTML 标签，其样式和行为完全封装妥当，无需额外的处理、框架或转换。
我们来看看 Web Components 的主要功能。
自定义元素自定义元素其实就是用户定义的 HTML 元素。它们是使用 CustomElementRegistry 定义的。要注册一个新元素时，需要通过 window.customElements 获取注册表实例并调用其 define 方法：
window.customElement.define('my-element', MyElement);
define 方法的第一个参数是我们新创建元素的标签名称。我们加上下面一行就能使用它了：

<my-element></my-element>