前言
在Web开发中，无论是企业级应用还是个人项目，前端开发都是必不可少的一部分。而为了满足各种不同的需求，我们经常需要构建定制化的Web组件。在这种情况下，Custom Elements可以成为一个有用的工具。
Custom Elements是用来创建自定义HTML标签的API，可以将不同的节点组合成一个单独的组件，从而封装 HTML、CSS、JavaScript，并将其重复使用。本文将深入探讨如何使用Custom Elements，提高Web组件代码的可维护性和可读性。
Custom Elements的基础
Custom Elements的最基础要素是一个将我们自定义的元素映射到一个JavaScript类的映射列表中。这样，当浏览器遇到我们定义的标记时，它会创建一个新的自定义元素，并将其绑定到定义的类的实例。
在定义时，我们需要提供元素的名称，以及使用哪个类来处理它。这可以通过使用window.customElements.define(tagName, class)来完成。tagName是我们要定义的自定义元素的名称，class是我们要使用的类。
下面是一个简单的示例，我们创建了一个自定义元素<x-name>，它将代表一个人的名字，并且我们在定义时仅使用了一个空的类。
class XName extends HTMLElement { }
window.customElements.define('x-name', XName);在该示例中，我们仅仅实现了一个空的类，但是现在它也可以被用作一个自定义元素，如下所示：
<x-name></x-name>
在这个声明中，它只是一个空的元素，没有任何内容。但是这是一个好的起点，它可以让我们开发的更多高级的使用Custom Elements的功能。
使用Custom Elements进行组件开发
在Web开发中，所有的应用都是由一个个组件组成的，因此从Custom Elements的角度来看，我们可以将其视为一种创建可重复使用组件的解决方案。下面是一个基本的Custom Element提供了一些灵活的组件开发方法。
Shadow DOM
Shadow DOM是一个隐藏DOM子树，它可以包含其他元素和内容，以及自定义样式表和脚本。
在Custom Elements中，我们可以为元素设置Shadow DOM，并将自定义组件的内容包含在其中。
下面是一个示例，我们创建一个自定义元素<x-counter>，并使用Shadow DOM来隐藏计数器计数器的实现方式。
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- -------- ---
----- ---- - -------------------------------
-------------- - ----
-----------------------------
-
-
----------------------------------------- ----------在该示例中，我们定义了一个名为<x-counter>的元素，并在其中定义了一个Shadow DOM。实际上可以在Shadow DOM中添加任何的标准HTML元素，并在CSS中定义任何样式、JS中写入任何的逻辑。
组件API
在开发Web组件时，我们通常会通过属性或方法来对外暴露其API。在Custom Elements中，我们可以通过实现connectedCallback()、attributeChangedCallback()，以及disconnectedCallback()等回调方法来操作自定义元素的行为。
connectedCallback()
connectedCallback()是当元素第一次被连接到文档DOM时调用的回调方法。在这个方法中，我们可以将元素设置为可编辑、添加样式表，或者开始与服务器进行AJAX交互。
-- -------------------- ---- -------
----- ----- ------- ----------- -
------------------- -
----- ----- - ---------------------------
-------------- - --------------------
-------------------
--------- -- -----------
---------- -- -
-------------- -- -------------------- -- ---------------------------
---
-
-
-------------------------------------- -------在该示例中，我们创建了一个自定义元素<x-list>，并通过AJAX从服务器获取有关列表的数据。然后，我们依据这些数据生成了一个HTML列表，所有这些操作都是在元素的connectedCallback()方法中完成的。
attributeChangedCallback()
attributeChangedCallback()是当元素的一个属性值被更改时调用的回调方法。在这个方法中，我们可以根据新的属性值更改元素的状态或外观。
-- -------------------- ---- -------
----- ------- ------- ----------- -
------ --- -------------------- - ------ ---------- -
------------------------------ --------- --------- -
-- ----- --- ------- -- -------- --- --------- -
----- ------ - ----------------------------------------
---------------------------- - ---------
-
-
------------- -
--------
----- ---------- - ------------------- ----- -------- ---
----- ------ - ---------------------------------
---------------- - ------ -----
-------------------------------
-
-
---------------------------------------- ---------在该示例中，我们创建了一个自定义元素<x-button>，并可以通过设置其color属性的值来更改按钮的背景颜色。每当color属性被更改时，就会调用attributeChangedCallback()方法，并更新按钮的外观。
disconnectedCallback()
disconnectedCallback()是当元素从文档DOM中断开连接时调用的回调方法。在这个方法中，我们可以清理元素，例如取消所有正在进行的AJAX、清除所有在元素级别创建的计时器等。
-- -------------------- ---- -------
----- ------- ------- ----------- -
---------------------- -
------------------------------------------------
-
------------- -
--------
----- ---------- - ------------------- ----- -------- ---
----- ------ - ---------------------------------
----- ------- - ---------------
-------------- - ---
---------------- - --------
-------------------------------
-
-
---------------------------------------- ---------在该示例中，我们创建了自定义元素<x-dialog>，用于显示一个对话框。在constructor()中，我们将元素移动到Shadow DOM中，并使用原来的内容填充对话框。当元素被断开连接时，我们调用对话框的关闭方法，以确保对话框被正确关闭。
总结
本文介绍了Custom Elements API的基本知识，以及如何使用它来构建可重用的Web组件。我们向您展示了如何使用Shadow DOM来隐藏元素的实现细节，以及如何在自定义元素中定义一个API，包括连接时的回调方法、属性更改时的回调方法，以及断开连接时的回调方法。在实际项目中，掌握Custom Elements技术，可以提高Web应用程序的开发效率，同时使代码更具可维护性和可读性。
示例代码
-- -------------------- ---- -------
----- ----- ------- ----------- - -
-------------------------------------- -------
----- -------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- -------- ---
----- ---- - -------------------------------
-------------- - ----
-----------------------------
-
-
----------------------------------------- ----------
----- ----- ------- ----------- -
------------------- -
----- ----- - ---------------------------
-------------- - --------------------
-------------------
--------- -- -----------
---------- -- -
-------------- -- -------------------- -- ---------------------------
---
-
-
-------------------------------------- -------
----- ------- ------- ----------- -
------ --- -------------------- - ------ ---------- -
------------------------------ --------- --------- -
-- ----- --- ------- -- -------- --- --------- -
----- ------ - ----------------------------------------
---------------------------- - ---------
-
-
------------- -
--------
----- ---------- - ------------------- ----- -------- ---
----- ------ - ---------------------------------
---------------- - ------ -----
-------------------------------
-
-
---------------------------------------- ---------
----- ------- ------- ----------- -
---------------------- -
------------------------------------------------
-
------------- -
--------
----- ---------- - ------------------- ----- -------- ---
----- ------ - ---------------------------------
----- ------- - ---------------
-------------- - ---
---------------- - --------
-------------------------------
-
-
---------------------------------------- ---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64916fc748841e9894f72cd1