用 Custom Elements 构建灵活可重用的 Web 组件
现如今，Web 应用程序越来越复杂和迅速发展。在这个大环境中，Web 版本的组件化和模块化变得越来越重要和流行。组件化可以促进模块化、代码的重用和团队协作。
Custom Elements 是 Web Components 技术的一部分，允许开发者自定义 HTML 元素，拓展现有的 HTML 标签，实现页面中灵活可重用的组件。
Custom Elements 是一种典型的生命期托管的技术，可以非常可靠的使用。这种技术最早由 Google 开发，现在大部分浏览器均已支持。
下面，我们来详细的阐述如何运用 Custom Elements 构建组件。
- 自定义元素
首先，我们需要定义一个自定义元素，我们通过 document.registerElement(name, prototype) 这个方法来实现。来看下面的例子：
// 定义 MyFirstComponent 元素
document.registerElement('my-first-component', {
prototype: Object.create(HTMLElement.prototype)
});在这个例子中，我们定义了一个名字为 my-first-component 的元素，其原型是基于 HTMLElement.prototype 的对象，这个对象将嵌套了一些特定于元素的方法，如 connectedCallback()、disconnectedCallback()、attributeChangedCallback() 等。接下来，我们就可以在 HTML 页面中使用这个自定义元素：
<my-first-component>Hello World!</my-first-component>
这里，我们使用了刚刚的 MyFirstComponent 元素，并且使用了 Hello World! 作为子元素。
- 元素的扩展性
Custom Elements 允许我们为元素添加自定义属性、方法，从而实现自定义元素的扩展性。例如，我们可以为元素添加一个自定义属性，用来定义这个元素的颜色：
-- -------------------- ---- -------
-- -- ----------------- --
----------------------------------------------- -
---------- ------------------------------------ -
------ -
---- ---------- -
------ -------------------------- -- --------
--
---- --------------- -
-------------------------- -------
-
-
--
---在这个例子中，我们定义了一个名字为 my-second-component 的元素，它有一个自定义的颜色属性。通过 get() 和 set() 设置这个属性，使得外部组件可以动态的改变这个元素的颜色。
接下来，我们就可以在 HTML 页面中使用这个自定义元素，并动态更改颜色属性：
<my-second-component color="red">Hello World!</my-second-component>
这里我们使用了刚刚的 MySecondComponent 元素，并且把颜色属性设置为红色。
- 组件的生命周期
Custom Elements 生命周期为元素的生命周期提供了事件回调。用这些事件回调，开发者们可以在元素被创建、被连接到文档时或从文档中移除时执行一些初始化或清理操作等。
Custom Elements 的生命周期事件包括：connectedCallback、disconnectedCallback 和 attributeChangedCallback。
下面我们来看一个连接到文档时和断开连接时调用的事件回调的例子：
-- -------------------- ---- -------
-- -- ---------------- --
---------------------------------------------- -
---------- ------------------------------------ -
------------------ -
------ ---------- -
--------------------------
-
--
--------------------- -
------ ---------- -
----------------------
-
-
--
---在这个例子中，我们定义了名为 my-third-component 的自定义元素，并给这些元素添加了 connectedCallback 和 disconnectedCallback 回调函数。当元素被连接到文档中或从文档中移除时，这两个事件回调函数将分别被触发。
最后，我们就可以在 HTML 页面中使用这个自定义元素，并观察控制台打印的信息：
<my-third-component>Hello World!</my-third-component>
这里我们使用了刚刚的 MyThirdComponent 元素，并输出了“我被连接到文档中了！”到控制台。
- 总结
Custom Elements 是 Web Components 技术的一部分，允许开发者自定义 HTML 元素，从而实现组件的模块化和重用。我们可以通过自定义元素的定义、元素扩展性和生命周期回调函数三个方面，构建灵活可重用的 Web 组件。
当然，Custom Elements 的可兼容性限制比较紧，需要在实际的开发中综合考虑使用。但它毋庸置疑带给我们的是新的思考方式和设计方式，它让 Web Components 的未来更加光明。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66447d35d3423812e4263cf1