在现代 Web 开发中，组件化已经成为一种常见的开发模式。通过将复杂的用户界面划分为多个小块的组件，可以减少大型应用程序的复杂性和维护成本，并使其更易于开发、测试和部署。在浏览器中，我们可以使用 Custom Elements 和 Shadow DOM 技术来创建高性能的 Web 组件。
Custom Elements
Custom Elements 是 Web Components 规范的一部分，它允许开发者定义自己的 HTML 元素，并使用它们构建 Web 组件。Custom Elements API 提供了一种定制元素的方式，可以使其具有行为和样式，与 DOM 的其余部分分离。这样可以实现更高效的程序架构，以及更简单的组件编写和维护。
定义 Custom Elements
定义 Custom Elements 主要分为两个步骤：注册自定义元素和实现相关的生命周期回调函数。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- ---------
-
------------------- -
-- ---------
-
---------------------- -
-- ---------
-
------ --- -------------------- -
------ --------- ---------
-
------------------------------ --------- --------- -
-- ----------
-
-
----------------------------------- -----------上述代码中 MyElement 类是自定义元素，它继承了 HTMLElement，可以像普通 HTML 元素一样使用，并定义了一些生命周期回调函数。在 customElements.define 中，将自定义元素注册为 my-element，这样 HTML 就可以使用 <my-element> 标签进行调用。
使用 Custom Elements
使用 Custom Elements 构建自定义元素，主要思路是将组件的模板和样式绑定到自定义元素上，从而将组件和 HTML 标签无缝连接。
-- -------------------- ---- -------
--------- -----------------
-------
-- ---- --
--------
---- ----------------
---- ---- ---
------
-----------
-------------------------
--------
----- -------- - -----------------------------------------------
----------------------
-------------
----- ------- ----------- -
------------- -
--------
----- ---------- - ------------------------ ---------
-------------------------------------------------
-
-
--
---------上述代码中，通过 <template> 标签定义了组件的 HTML 和 CSS 模板，其实现方式与 Vue、React 框架非常相似。在 customElements.define 中定义自定义元素，通过 attachShadow 方法将 Shadow DOM 添加到自定义元素中，然后将组件模板添加到 Shadow DOM 中。
Shadow DOM
Shadow DOM 是另一项 Web Component 规范，它提供了一种封装和隔离的方式，使开发者可以编写更加可靠和安全的 Web 组件。将 Shadow DOM 添加到自定义元素中后，其内部的 DOM 结构和样式将与文档中的其他元素相互隔离，从而避免了可能存在的命名冲突和样式干扰。
创建 Shadow DOM
可以使用 attachShadow 方法为自定义元素创建 Shadow DOM，该方法有一个参数 mode，可以指定作为选项的 Shadow DOM 实例模式。模式有两个取值，分别是 open 和 closed。open 表示 Shadow DOM 内部的 DOM 和样式可以从外部访问，closed 则表示 Shadow DOM 内部的内容对外部代码不可见。
-- -------------------- ---- -------
-------------------------
--------
----------------------
-------------
----- ------- ----------- -
------------- -
--------
----- ---------- - ------------------------ ---------
-------------------- - -
-------
-- ---- --
--------
---- ----------------
---- ---- ---
------
--
-
-
--
---------上述代码中，通过 <my-element> 标签调用了自定义元素 MyElement，在其构造函数中，使用 attachShadow 方法为自定义元素创建 Shadow DOM，其中 mode 取值为 open。然后在 Shadow DOM 中插入 HTML 和 CSS 模板，从而创建一个完整的组件。
封装 Shadow DOM
Shadow DOM 的另一个重要特性是其可以遮蔽内部 DOM 结构的细节，同时只暴露必要的接口给外部使用。这种封装过程可以将内部的实现细节与外部整体隔离开来，从而提高组件的可读性、可维护性和可用性。
-- -------------------- ---- -------
-------------------------
--------
----------------------
-------------
----- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
-- ------ --- ------ --
--------
---- ----------------
---- -----------------
-------------
------
--
-- -------------------
---------- - ----------------------------------------
-
------------------- -
---------------------- - ---------------------------
-
-
--
---------在上述代码中，将 Shadow DOM 中的具体实现细节留在自定义元素的内部，只对外部暴露必要的接口。在自定义元素的构造函数中，创建了组件的样式和 DOM 结构，接着通过 querySelector 方法获取内部 DOM 元素 title，并将其包装成一个可供外部使用的 title 属性。最后，在 connectedCallback 回调函数中，将外部传递的 title 属性赋值给 title 元素内部，从而实现展示效果。
总结
本文详细介绍了使用 Custom Elements 和 Shadow DOM 技术创建高性能的 Web 组件的过程。定制自己的 HTML 元素，与现有元素无缝连接，使用 Shadow DOM 隔离组件内部的样式和行为，提高组件的封装性和可用性。在实践过程中，还需要考虑浏览器兼容性，尤其是 IE 等老旧浏览器的兼容问题，需要引入 polyfill 库进行处理。
示例代码：
-- -------------------- ---- -------
----------- ------------ -------
--- -- ------------ ----
-------------
--------
----- -------- - -----------------------------------
------------------ - -
-------
-------- -
-------------- -----
-------- -----
----------------- -----
-
------ -
--------------- -----
---------- -----
------------ -----
------ -----
-
--------
---- ----------------
---- -----------------
-------------
------
--
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
--------------------------------------------------------------
---------- - ----------------------------------------
-
------------------- -
---------------------- - ---------------------------
-
-
----------------------------------- -----------
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64798221968c7c53b0581c38