前言
随着 Web 技术的不断发展，越来越多的前端开发者开始注重代码组件化、模块化，而 Custom Elements 就是其中的一个重要实现。本文将详细介绍 Custom Elements 的原理、用法以及实践经验，希望能给大家带来一些指导意义。
什么是 Custom Elements
Custom Elements 是 Web Components 的一个重要组成部分，它允许我们自定义 HTML 元素，从而更好地组织和管理 Web 页面的内容。
正常的 HTML 元素都是浏览器内置支持的，由浏览器渲染和处理。但 Custom Elements 是完全由开发者自己定义的，它包含了自己的样式和行为。可以理解为是一种自定义的、可重用的 HTML 组件。
Custom Elements 的原理
Custom Elements 的实现原理涉及到三个 API：
CustomElementRegistry.define()：定义 Custom Element。
HTMLElement.prototype.connectedCallback()：元素被插入到文档中时触发的函数。
HTMLElement.prototype.disconnectedCallback()：元素从文档中删除时触发的函数。
其中，CustomElementRegistry.define() 是定义 Custom Element 的最关键 API。它的作用是告诉浏览器我们要定义一个新的 Custom Element，并将其与一个 JavaScript 类或原型相关联。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------------- -
------------------- ------- ----- -- --- -------
-
---------------------- -
------------------- ------- ------- ---- --- -------
-
-
------------------------------------------ -----------------上面的代码中，我们定义了一个名为 MyCustomElement 的 Custom Element，并将其与 HTMLElement 相关联。然后我们可以使用 customElements.define() 方法将其注册到浏览器中。
现在我们可以在 HTML 中创建一个名为 my-custom-element 的元素，它将自动与我们定义的 MyCustomElement 相关联。
<my-custom-element></my-custom-element>
这个时候，我们在浏览器控制台中就可以看到 connectedCallback() 函数执行的结果，即打印出 "Custom element added to the page"。
Custom Elements 的实践
下面我们来看一个具体的 Custom Elements 实践例子，它会实现自定义的带复选框的列表项。
-- -------------------- ---- -------
---- -------- ---
--------- ---------------
-------
----- -
-------- ------
------- ---- --
-
--------- -
-------- -------------
------ -----
------- -----
------------- -----
-------------- ----
------- --- ----- -----
------- --------
-
-------- -
----------------- --------
-
---- -
-------- -------------
--------------- -------
-
--------
---- -----------------------
-------------
-----------
---- ---------- ---
---------
------------- ------------ ----------------
------------------ ----------------
------------------ ----------------
----------CodePen 示例：https://codepen.io/cocoon-yu/pen/poEZJRL。
我们可以看到，我们首先通过 <template> 元素定义了一个自定义的列表项元素，它包含了一个复选框和一个显示文字的元素。
然后我们使用 MyList 和 MyListItem 两个自定义元素，分别代表一个列表和其子项。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
------------------- ----- ------ --- -- -- ------ ---
------------------------------------------------------------------------------------------
------------- - -------------------------------------------
--------- - --------------------------------------
--------------------------------------- ------------------------
-
------ --- -------------------- -
------ ------------
-
------------------------------ --------- --------- -
-- ----- --- ---------- -
----------------------------------------- -------- --- ------
-
-
-------- -
---------------------------- ---------------------------- --- ---- - -- - ------
-
--- ------------------ -
--------------------- - ------
-
--- ------------- -
------ ----------------------
-
-
------------------------------------- ------------
----- ------ ------- ----------- -
------------- -
--------
------------------- ----- ------ --- -- -- ------ ---
------------------------- - ----------------
-
-
-------------------------------- --------上面的代码中，我们定义了两个 Custom Element：MyListItem 和 MyList。
MyListItem 继承自 HTMLElement，并使用 Shadow DOM 技术创建了一个完全自主的 DOM 节点。在 constructor 构造函数中，我们使用了 document.getElementById('list-item').content.cloneNode() 方法将 <template> 元素复制到了 shadowRoot 中。
同时，我们还使用了 attributeChangedCallback() 方法来响应 checked 属性的变化，并使用 setAttribute() 方法来更新该属性值。
MyList 则相对简单，它只是基本的占位元素，用于容纳 MyListItem 元素。
最后，我们可以在 HTML 中如下使用自定义元素：
<my-list>
<my-list-item checked>Item 1</my-list-item>
<my-list-item>Item 2</my-list-item>
<my-list-item>Item 3</my-list-item>
</my-list>这将创建一个带有三个复选框的列表，展示内容为 "Item 1"、"Item 2" 和 "Item 3"。
总结
Custom Elements 是一个非常有用的前端技术，可以让我们更好地组织代码，并提高可重用性。本文介绍了 Custom Elements 的原理和使用方法，并给出了一个具体实例，相信读者能够通过本文掌握 Custom Elements 技术，更好地运用于实际开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6590c582eb4cecbf2d6096a9