介绍
Custom Elements 是 Web Components 标准的一部分，它允许我们自定义 HTML 元素并在网页中使用。使用 Custom Elements 可以让我们构建可扩展、可重用的应用程序，提高代码的模块化程度和可维护性。
本文将介绍如何使用 Custom Elements 构建可扩展应用的技巧，包括如何定义和使用 Custom Elements，如何使用 Shadow DOM 和 CSS 变量进行样式隔离和定制，以及如何通过事件和属性进行组件间通信。
定义 Custom Elements
定义 Custom Elements 需要使用 customElements.define 方法，该方法接受两个参数：元素名称和元素类。元素名称需要使用短横线分隔的小写字母命名，例如 my-element，元素类需要继承自 HTMLElement。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- ---
-
------------------- -
-- ---
-
---------------------- -
-- ---
-
------ --- -------------------- -
------ --------- ---------
-
------------------------------ --------- --------- -
-- ---
-
-
----------------------------------- -----------在元素类中，我们可以定义构造函数、生命周期方法和属性监听器等。其中，connectedCallback 和 disconnectedCallback 方法分别在元素被插入和移除文档树时调用，observedAttributes 方法返回需要监听的属性名，attributeChangedCallback 方法在监听的属性值变化时调用。
使用 Shadow DOM 和 CSS 变量
使用 Shadow DOM 可以将元素的样式和结构隔离，避免样式冲突和结构泄露。使用 CSS 变量可以让我们在应用中定义主题和样式变量，方便定制和维护。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
----------------- - -
----- -
-------- ------
-------- -------------- ------
----------------- --------------- ------
------ ----------------- ------
-
------------ -
------- ------------- ------
-
--
----- ---- - -------------------------------
--------------------------
-------------------------
-
-在元素的构造函数中，我们使用 this.attachShadow 方法创建 Shadow DOM，并定义样式和插槽节点。在样式中，我们使用 :host 选择器表示元素本身，使用 ::slotted(*) 选择器表示插槽内容，使用 var() 函数引用 CSS 变量。
组件间通信
组件间通信可以通过事件和属性进行。使用事件可以让组件触发和监听自定义事件，实现松耦合的通信方式。使用属性可以让组件通过属性值传递数据，实现紧耦合的通信方式。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------------------ -- -- -
----- ----- - --- ----------------------- -
------- - ----- ------- --
-------- -----
--------- -----
---
--------------------------
---
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
---------------------- ---------------------------- -
------- - ------ -------- --
-------- -----
--------- -----
----
-
-
--- ------- -
------ ---------------------------
-
--- ------------ -
-------------------------- -------
-
-在元素中，我们可以通过 this.dispatchEvent 方法触发自定义事件，并通过 CustomEvent 构造函数传递事件数据。在监听事件时，我们可以通过 this.addEventListener 方法添加事件监听器，通过 event.detail 属性获取事件数据。在监听属性时，我们可以通过 static get observedAttributes 方法定义需要监听的属性名，通过 attributeChangedCallback 方法在属性值变化时触发自定义事件。
示例代码
下面是一个使用 Custom Elements 构建可扩展应用的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- -------- ------------
-------
------
-------------------------
----------- ----------------------------
----------- ---------------
---- ----------------------------
-------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- ----- - --------------------------------
----------------- - -
----- -
-------- ------
-------- -------------- ------
----------------- --------------- ------
------ ----------------- ------
-
------------ -
------- ------------- ------
-
--
----- ---- - -------------------------------
--------- - ----------
--------------------------
-------------------------
------------------------------ -- -- -
----- ----- - --- ----------------------- -
------- - ----- ------- --
-------- -----
--------- -----
---
--------------------------
---
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
---------------------- ---------------------------- -
------- - ------ -------- --
-------- -----
--------- -----
----
-
-
--- ------- -
------ ---------------------------
-
--- ------------ -
-------------------------- -------
-
-
----------------------------------- -----------
---------
-------
-------在该示例代码中，我们定义了一个 my-element 元素，它包含一个插槽节点和一个点击事件。我们可以在 HTML 中使用 my-element 元素，并通过属性和插槽传递数据。在 JavaScript 中，我们可以监听 my-element 元素的自定义事件和属性变化事件，实现组件间通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67da579fa941bf713424732f
