Web Components 是一种用于创建可重用组件的技术，而 Custom Elements 则是其中的一个重要标准。通过 Custom Elements，我们可以创建出自定义的 HTML 元素，并且将它们与 JavaScript 类相结合。
在实践 Custom Elements 过程中，继承和复合是两种常见的组件设计方式。本文将介绍 Custom Elements 下的继承和复合组件的实践方法，并提供一些实用的示例代码。
继承组件
继承组件是一种创建 Custom Elements 的方法，它可以让我们在不需要编写重复代码的情况下，创建出一系列具有共同特性的组件。
如下所示，我们创建了一个基础组件 my-element，它具有类似于 div 标签的基本样式，并且可以根据传入的 color 属性控制背景颜色。
-- -------------------- ---- -------
---- --------------- ---
----------
-------
----- -
-------- ------
------ ------
------- ------
----------------- ----------------------- ------
-
--------
-------------
-----------
--------
----- --------- ------- ----------- -
------------- -
--------
------------------------ ---------
----------------------------
------------------------------------- -----
--
-
------ --- -------------------- -
------ ----------
-
------------------------------ --------- --------- -
------ ------ -
---- --------
---------------------------------------
--------------------- --------
--
------
-
-
-
----------------------------------- -----------
---------现在我们想要创建一个基于 my-element 的 card-element，它会继承 my-element 的基础样式，并根据传入的 title 和 description 属性展示卡片信息。我们可以通过继承 MyElement 类来实现：
-- -------------------- ---- -------
---- ----------------- ---
----- ------------ -----------------------
----------
-------
----- -
-------- ------
------- --- ----- -----
-------- -----
-
-- -
----------- --
-
- -
-------------- --
-
--------
----- --------------------
----- --------------------------
-----------
--------
----- ----------- ------- --------- -
------------- -
--------
------------------------ ---------
----------------------------
------------------------------------- -----
--
-
------ --- -------------------- -
------ --------- ---------------
-
------------------------------ --------- --------- -
------ ------ -
---- --------
--------------------------------------------------------------- - ---------
------
---- --------------
--------------------------------------------------------------------- - ---------
------
-
-
-
------------------------------------- -------------
---------在上面的代码中，我们重新定义了 CardElement 类，并继承了 MyElement 类。CardElement 类可以访问到 MyElement 类的方法和属性，比如 observedAttributes 和 attributeChangedCallback。
通过继承 MyElement 类，我们非常方便地创建了一个新的组件，它具有与 my-element 相同的样式，并且可以根据传入的 title 和 description 展示卡片信息。因此，在组件开发过程中，我们应该尽可能地使用继承来减少重复代码的编写。
复合组件
复合组件是另一种创建 Custom Elements 的方法，它可以让我们将多个组件组合成一个功能完整的组件。
如下所示，我们创建了一个 tabs-element，它由多个 tab-element 组成，并且可以通过传入的 active 属性控制显示哪一个 tab-element。
-- -------------------- ---- -------
---- ----------------- ---
----------
-------
----- -
-------- ------
-
---- -
-------- -----
-
----------- -
-------- ------
-
---- -
-------- -----
---------------- --------------
------------ -------
-------- ----
----------------- --------
------- --- ----- -----
-------------- --- --- - --
-
---- ------ -
------- -----
----------- -----
------- --------
------------ -----
-
--------
---- ------------
------- ------------------ ----------
------- ------------------ ----------
------- ------------------ ----------
------
-------------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
------------------------ ---------
----------------------------
------------------------------------- -----
--
------------ - -------------------------------------------------------
--------- - --------------------------
------------- - --
------------------ - ---
--------------
-
------------------- -
------------------ - ------------------------------
--------------------------- -- -------------------------------- ---------------------
-
---------------------- -
--------------------------- -- ----------------------------------- ---------------------
-
-------- -
----------------------------- ------ -- -
--------------------------------- ----- --- ---------------
---
----------------------- ------ -- -
------------------------------ ----- --- ---------------
---
-
-------------------- -
----- ----- - ------------------------------------------------- ----
-- -------------- --- ------ -
-------
-
------------- - ------
--------------
-
-
------------------------------------- -------------
---------在 tabs-element 组件中，我们定义了一个包含多个 tab-element 的 slot，并通过 Array.from(this.children) 来获取到所有的 tab-element 子元素。
我们还通过添加 button 元素，并且为它们添加了一个 data-index 属性来控制选中哪一个 tab-element。通过 update 方法，我们可以根据传入的 active 属性来控制显示哪一个 tab-element。
代码如下所示：
-- -------------------- ---- -------
---- ---------------- ---
----------
---- ------------
-------------
------
-----------
--------
----- ---------- ------- ----------- -
------------- -
--------
------------------------ ---------
----------------------------
------------------------------------- -----
--
-
-
------------------------------------ ------------
---------在上面的代码中，我们定义了一个 tab-element 组件，它包含了一些需要展示的内容，并通过 slot 元素来接受传入的内容。
通过使用复合组件的方式，我们可以将多个不同的组件组合成一个复杂的组件，并且可以根据需要随意进行扩展和定制。复合组件的优势在于它可以让组件的开发过程变得非常灵活和高效。
总结
在本文中，我们介绍了 Custom Elements 下的继承和复合组件实践方法，并提供了一些实用的示例代码。在组件的开发过程中，我们应该尽可能地使用继承来减少重复代码的编写，并且通过使用复合组件的方式来组合多个不同的组件。这些技术可以让我们创建出更加优雅和高效的 Web 组件，并且对于组件的复用和维护都具有非常重要的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654b64d77d4982a6eb5402d8