Web Components 是一种创建可重复使用自定义元素的前端技术，它可以帮助我们实现在不同页面中共用组件，提高代码的可维护性和开发效率。而 Custom Elements 就是 Web Components 的核心 API 之一，用于定义自定义元素。
Polymer 是一个基于 Web Components 的框架，它提供了丰富的元素库和工具集，使我们可以更加轻松地创建自定义元素。在本篇文章中，我们将对 Web Components 和 Polymer 的 Custom Elements 进行探究，并介绍如何使用 Custom Elements 来创建自定义元素。
Web Components 的 Custom Elements API
Custom Elements API 是 Web Components 的核心 API 之一，它使我们可以在页面上定义和注册自定义元素。下面我们将介绍 Custom Elements API 的两个重要方法：define() 和 extend()。
define()
define() 方法用于定义自定义元素，语法如下：
window.customElements.define(tagName, constructor, options);
其中，tagName 表示自定义元素的标签名，constructor 表示该元素的构造函数，options 是一个可选配置对象。可以通过以下方式定义一个简单的自定义元素：
class MyElement extends HTMLElement { constructor() { super(); this.textContent = 'Hello, world!'; } } customElements.define('my-element', MyElement);
上述代码就定义了一个名为 my-element 的自定义元素，当该元素在页面中创建时，它的内容将会显示为“Hello, world!”。
extend()
extend() 方法用于扩展已有的 HTML 元素，语法如下：
let MyElement = customElements.extend(tagName, constructor);
其中，tagName 表示要扩展的 HTML 元素的标签名，constructor 表示该元素的构造函数。可以通过以下方式来扩展原生的 HTML 元素：
class MyInput extends customElements.extend('input', HTMLInputElement) { constructor() { super(); this.placeholder = 'Enter your name'; } } customElements.define('my-input', MyInput);
上述代码定义了一个名为 my-input 的自定义元素，它继承了原生的 input 元素，并添加了一个 placeholder 属性。
使用 Polymer 的 Custom Elements
Polymer 是一个基于 Web Components 的框架，它提供了一系列 API、元素库和工具集，使我们可以更加轻松地创建自定义元素。下面我们将介绍 Polymer 的一些常用 API，并使用 Polymer 创建自定义元素。
Polymer()
Polymer() 方法用于定义一个 Polymer 元素，语法如下：
let PolymerElement = Polymer(options);
其中，options 是一个对象，表示 Polymer 元素的配置项。下面我们使用 Polymer() 方法创建一个名为 my-element 的自定义元素：
-- -------------------- ---- ------- --------- --- ------------- ----------- - ----- ------- ---- ------ -- --------- ---------- - ------------------- - - ----------- - ---展开代码
上述代码定义了一个名为 my-element 的 Polymer 元素，它有两个属性 name 和 age，还有一个方法 sayHello() 用于输出问候语。
Polymer.Element
Polymer.Element 是 Polymer 元素的基类，当我们使用 Polymer() 方法创建一个 Polymer 元素时，实际上是继承了该基类。下面我们来创建一个继承于 Polymer.Element 的自定义元素：
-- -------------------- ---- ------- ----- --------- ------- --------------- - ------ --- ---- - ------ ------------- - ------ --- ------------ - ------ - ----- ------- ---- ------ -- - ---------- - ------------------- - - ----------- - - ----------------------------------- -----------展开代码
上述代码与前面使用 Polymer() 方法创建的自定义元素功能相同，只是使用了 ES6 的 class 语法。
总结
Web Components 和 Polymer 的 Custom Elements API 是创建自定义元素的两种方法，它们可以帮助我们提高代码的可重用性和可维护性。本文介绍了 Custom Elements API 和 Polymer 的 Element 类的用法，并提供了示例代码。希望这篇文章对你学习 Web Components 和 Polymer 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ad9b648841e989491aa4f
