Web Components 技术是近年来 Web 前端领域中备受瞩目的技术之一。其中，Custom Elements 是 Web Components 技术中最重要的一环，它允许开发者自定义 HTML 元素。Custom Elements 的开发方式通常有两种：继承已有的 HTML 元素和直接扩展 HTMLElement。
相比直接扩展 HTMLElement，继承已有的 HTML 元素具有更多的优势：可以让新元素继承其它元素的一些属性、行为、样式等。本篇文章将介绍如何通过继承构建更高级别的 Custom Elements。
继承已有的 HTML 元素
在继承已有的 HTML 元素时，我们需要选取一个合适的元素来继承。通常我们会选择 HTMLElement 或者某个具体的 HTML 元素。如果我们要构建一个包含多个自定义行为的的 Custom Element，那么一般情况下我们会选择 HTMLElement，这个元素几乎包含了所有 HTML 元素的基本属性和方法。
除了继承 HTMLElement，我们还可以选择以更具体的 HTML 元素为基础，这样可以在继承的同时继承它的样式和默认属性。例如，我们可以以 button 为基础来构建一些扩展功能按钮。
继承已有的 Custom Elements
在继承已有的 Custom Elements 时，我们需要选取一个合适的 Custom Element。该 Custom Element 需要满足我们业务需求，且它的结构和内容需要嵌入到我们所构建的新 Custom Element 中。
例如，我们可以继承 <video> 自定义元素来创建一个新的 Custom Element，该 Custom Element 具有自定义的播放控制器，以及一些新增的行为。
构建更高级别的 Custom Elements
通过继承已有的 HTML 元素或 Custom Element，我们可以构建出更高级别的 Custom Elements。新元素包含了已继承元素的所有基本行为和属性，同时又添加了自定义行为和属性。
例如，我们可以扩展 input[type="text"] 元素来创建一个新 Custom Element，该 Custom Element 具有文本框格式化、自动补全、联想输入等新行为。
示例代码
下面是一个以 HTMLButtonElement 为基础的 Custom Element 示例：
-- -------------------- ---- -------
--------- ------------------
-------
----- -
-------- -------------
-------------- ----
------- --- ----- ---------------------
-------- --- -----
----------------- ---------------------
------ -----
------- --------
-
---------------- -
-------- ----
------- ------------
-
--------
-------------
-----------
--------
---------------------------------- ----- ------- ----------------- -
------------- -
--------
----- -------- - ----------------------------------------
----- --------------- - -----------------
------------------- ----- ------ ------------------------------------------------
------------------------------ --- -- -
-- ------------------------------------- -
-------------------
--------------------
-
---
-
--- --------------- -
-- ------- -
-------------------------------
- ---- -
----------------------------------
-
-
--- ---------- -
------ ------------------------------------
-
-- - -------- -------- ---
---------在上面的示例代码中，我们继承了 HTMLButtonElement，添加了一些基本的样式，并且添加了 disabled 属性，同时也重写了 disabled 属性的 getter 和 setter 方法。这样我们就可以使用新的 my-button 自定义元素，该元素继承了 HTMLButtonElement 的所有行为和属性，同时具有自定义的属性和样式。
总结
通过继承构建 Custom Elements 是 Web Components 技术中非常基础和核心的内容之一。通过继承已有的 HTML 元素或 Custom Elements，我们可以快速的构建出自己的 Custom Elements。本文介绍了以 HTMLButtonElement 为基础的自定义按钮，并提供了示例代码和解释。希望这篇文章对你有所帮助，能够带给你一些启迪和灵感。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c2158083d39b4881634893