1. 简介
Custom Elements 和 Web Components 是现代 Web 开发中的两个重要概念，用于解决 Web 应用复杂性和可维护性的问题。Custom Elements 具有自定义元素的能力，可以创建新的 HTML 元素，而 Web Components 包括 Custom Elements，还包括 Shadow DOM 和 HTML Templates，能够让开发者创建可复用的、封装良好的 Web 组件。
2. Custom Elements
2.1 创建 Custom Elements
创建 Custom Elements 的方式很简单，只需要先继承 HTMLElement，再使用 customElements.define() 方法注册即可。
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
-------- -- ----- ----- --
-
------------------- -
-------------- - -------------------------------------------------
-
-
-------------------------------------- --------------上面的代码创建了一个 Custom Element custom-button，该元素具备按钮的功能和样式，可以接受一个 label 属性设置按钮文本。调用 customElements.define() 方法，将该元素注册到原生元素列表中。在页面中使用该元素，只需要添加 <custom-button label="click me"></custom-button> 即可。
2.2 生命周期
Custom Elements 元素具有一些特殊的生命周期，它们可以使用 connectedCallback()、disconnectedCallback()、attributeChangedCallback() 等方法来操作元素。例如，connectedCallback() 方法在元素插入到 DOM 中时被调用，可以在该方法中设置元素的样式或绑定事件监听器。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------------- -
----------------------------- -------------
-
---------------------- -
-------------------------------- -------------
-
-------- -
------------------ ---- ---------
-
-
------------------------------------- -------------2.3 继承元素
Custom Elements 可以继承其他元素，例如 HTMLInputElement、HTMLButtonElement、HTMLDivElement 等。在继承时需要使用 super() 方法调用父类构造函数，并且需要使用 extends 关键字进行继承。
-- -------------------- ---- -------
----- ----------- ------- ---------------- -
------------- -
--------
----------------------------- -------------
-
-------- -
------------------ ---- ---------
-
-
------------------------------------- ------------ - -------- ------- ---上面的代码创建了一个继承自 HTMLInputElement 的 Custom Element，该元素具备文本编辑框的功能和样式，可以在输入框失去焦点时执行 onBlur() 方法。
3. Web Components
3.1 Shadow DOM
Shadow DOM 是 Web Components 中的一个重要组成部分，它提供了一种封装和隔离的机制，使得 Web 组件的样式和行为不会被外部 CSS 或 JavaScript 影响。通过使用 Shadow DOM，开发者可以创建自定义的元素和组件，并且可以使组件自包含。
-- -------------------- ---- -------
----------------
----------
-------
-- ------ --- ---- --
----- - -------- ------ -
------ - ----------------- ---- -
--------
---- ------ --- ---- ---
------------- -----------
-----------
-----------------上面的代码创建了一个 custom-element 元素，它包含了一个 Shadow DOM，里面包含了一个红色按钮。封装组件的好处是可以避免其他样式和脚本干扰到组件的样式和行为。
3.2 HTML Templates
HTML Templates 是另一个 Web Components 的重要部分，它提供了一种模板标记，可以用于创建可复用的、动态的 HTML 片段。通过使用 HTML Templates，开发者可以创建可重用、可共享的 Web 组件。
-- -------------------- ---- -------
--------- ----------------------------
-------
------ - ----------------- ----- -
--------
------------------------------
-----------
---------------
----------
-------
-- -- ---------------------- ---- --
------- ------------------------------
--------
----------- ---------
-----------
----------------上面的代码创建了一个 HTML 模板 custom-button-template，其中包含了一个蓝色的按钮样式。通过 <slot> 标记，可以插入任意内容，使得按钮具有动态性。使用 <template> 标记包裹自定义内容，并指定使用 custom-button-template 的样式，就可以创建一个可复用的 custom-button 组件。
4. 应用实例
4.1 购物车组件
购物车组件是一个常见的 Web 组件，它可以帮助用户添加、删除商品、计算价格并生成订单。
-- -------------------- ---- -------
--------- -------------------
-------
----- - ------- --- ----- ----- -------- ----- -
----------- - -------- ----- ---------------- -------------- -
------------- - ------ ---- ------- -------- -
--------------- - ----------------- ------ ------ ------ -
--------
---- -------------
------------ ---------
----
--- ------------------ ------------
------------- --------
----------------
----- ----------------------------------
-----
--- ------------------ ------------
------------- --------
----------------
----- ----------------------------------
-----
-----
----------- ---------
------- ----------------------------------------
------
-----------
---------------
----------
-------
------- ---------------------
--------
---- -------------
----
---- ----- ---
-----
----------- ----------------
------- ----------------------------------------
------
-----------
----------------上面的代码创建了一个名为 shopping-cart 的自定义元素，并使用 cart-template 模板生成购物车组件内容。其中，{{total}} 表示动态生成的订单总价。购物车组件还包含了动态添加和删除商品的功能。
-- -------------------- ---- -------
----- ------------ ------- ----------- -
------------- -
--------
---------- - -- --- -- ----- -------- --- ------ -- -- - --- -- ----- -------- --- ------ -- ---
---------- - --
------------- - -----------------------------------------
-
------------------- -
--------------
----------------------
-
-------- -
----- ------- - --------------------------------------
----- ------- - -------------------------------------
----- ------- - --------------------------------------
----- ---------- - -----------------------------------------
----------------- - ---
--- ---- ---- -- ----------- -
----- ------ - -----------------------------
----------------- - --------
-----------------------------------
---------------- - ---------------------------------------------------------- ------------------------------------
----------------------------
-
------------------- - ------- ----------------
-------------- - ---
--------------------------
-
---------------- ------ -
----- -------- - ------------------------ - ------
----------------- --- --------- ----- ----- ---
---------- -- ------
--------------
-
----------------- -
----- ----- - --------------------------- -- ------- --- ----
-- ------ --- --- -------
---------- -- ------------------------
------------------------ ---
--------------
-
---------- -
------------------------
-
---------------- -
----- ------ - ---------------------------------
----- ---------- - ---------------------------------------
----- ----------- - --------------------------------------
-------------------------------- -- -- -
------------------------ ------------------- - ---- ------------------------ - -----
---
------------------------ -- -
----------------------------- -- -- -
----- -- - ----------------------------------
-----------------------
---
---
------------------------------------- -- -- -
----------------
---
-
-
-------------------------------------- --------------上面的代码实现了 shopping-cart 元素的 JavaScript 部分，包括动态添加和删除商品、更新总价以及委托事件。购物车组件通过封装和隔离实现了自包含，方便开发者使用和维护。
5. 总结
Custom Elements 和 Web Components 是现代 Web 应用中的重要技术，它们可以让开发者创建可复用、可维护、自包含的 Web 组件。Custom Elements 元素具有自定义元素的能力和生命周期，而 Web Components 包括 Custom Elements、Shadow DOM 和 HTML Templates 三个部分，可以帮助开发者更好地管理和封装组件。使用 Custom Elements 和 Web Components 技术，开发者可以写出高质量、易维护的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6594f568eb4cecbf2d93bd5e