随着 Web 技术的发展，前端开发越来越注重组件化、模块化和可复用性，为此，W3C 在 2013 年发布了 Web 组件规范。而 Custom Elements 则是其中的一项关键特性，对于前端开发来说，Custom Elements 可以使开发者创建完全自定义的 HTML 标签。
本文将探讨使用 Polymer 和 WebComponents.js 实现 Custom Elements 的必要性和区别，为您提供更深入的了解和学习指导。
Custom Elements 简介
Custom Elements 是 Web Components 规范的核心特性之一，它允许开发者定义和注册自定义标签。通过 Custom Elements，我们能够创造出一个全新的 HTML 标签，它们的行为和样式可以被定义、封装和复用。
在 Custom Elements 规范中，每个自定义元素分为 自定义标签定义 和 自定义元素实例 两部分，其中定义部分包括元素的名称、行为和属性等内容；实例部分则包括元素的具体属性和方法等实现。自定义标签通过该标签的名称自动识别成一个实例，在页面中可以像普通元素一样被使用。
Polymer 和 WebComponents.js
Polymer 和 WebComponents.js 都是用于实现 Web Components 的库，但它们有着不同的目标和定位。
Polymer 是一个基于 Web Components 规范的库，它使用了一系列新的 HTML 标签和属性，帮助我们更简单、更快速地创建 Web Components。Polymer 为我们提供了一套可扩展、可组合的 API，使我们可以轻松构建具有高度可定制化和复用性的组件。同时，Polymer 还提供了一些编译工具，能够自动生成适用于各种浏览器版本的 Web Components，这使得开发者的工作更加高效。
WebComponents.js 则是一个 polyfill 库，它允许我们在没有原生支持 Web Components 的浏览器中使用这一规范。WebComponents.js 实现了四个主要特性，分别为 Custom Elements、Shadow DOM、HTML Imports 和 HTML Templates，并通过 JavaScript 代码模拟了它们的行为。可以说，WebComponents.js 可以被认为是让 Web Components 能够在无需等待浏览器原生支持的情况下，兼容更多旧版浏览器的一种解决方案。
Custom Elements 的实现
以下是一个使用 Polymer 和 WebComponents.js 分别实现 Custom Elements 的样例：
Polymer 实现 Custom Elements
-- -------------------- ---- -------
----------- --------------------
----------
-------
----- -
------ ----
-
--------
--------- ------- ------ -------------
-----------
--------
----- ------------- ------- --------------- -
------ --- ---- - ------ ----------------- -
-
--------------------------------------- ---------------
---------
-------------以上代码中，Polymer 的代码包含在 <dom-module> 元素内，它定义了一个名为 custom-element 的 Custom Elements。在 template 中定义了 Custom Elements 的 HTML 内容，同时通过 :host 选择器定义了 Custom Elements 的样式。而在后面的 JavaScript 中，我们使用了 customElements API 将 Custom Elements 注册进了全局的 Custom Elements Registry 中。
WebComponents.js 实现 Custom Elements
-- -------------------- ---- -------
--------
--- ------------- - -------------------------------------
----------------------------- - ---------- -
--- ------ - ------------------- ----- ------ ---
---------------- - -
-------
----- -
------ -----
-
--------
--------- ---------------- ------ -------------
--
--
------------------------------------------ - ---------- ------------- ---
---------以上代码中，我们首先创建了一个名为 CustomElement 的 JavaScript 对象，然后通过 createdCallback 回调函数，在 Custom Elements 被创建时动态生成了 Shadow DOM 并添加了 HTML 内容和样式。最后，我们使用 document.registerElement API 将 Custom Elements 注册到了全局 Custom Elements Registry 中。
总结
通过本文，我们了解到了 Custom Elements 的基本概念、Polymer 和 WebComponents.js 两种库在实现 Custom Elements 上的不同方式。这些都将为我们开发高质量、可复用的组件提供便利，同时提升我们的开发效率，降低代码冗余度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646af8b0968c7c53b0a6d3da