Custom Elements 是 Web Components 的一部分，它允许开发者创建自定义的 HTML 元素，并可以将其重复使用在不同的页面上。Custom Elements 可以让开发者更好地管理和组织代码，提高代码的可重用性和可维护性。本文将介绍如何创建功能完善的 Custom Elements。
1. 基本概念
Custom Elements 可以看作是一种自定义的 HTML 元素，它可以包含一些自定义的属性和方法。Custom Elements 有两种类型：autonomous custom elements 和 customized built-in elements。
Autonomous custom elements：是完全自定义的元素，没有任何基于内置元素的限制。它们可以继承任何类，可以使用任何属性和方法。Autonomous custom elements 必须使用
class关键字来定义。Customized built-in elements：是基于内置元素的扩展，它们必须继承内置元素，并且只能使用内置元素的属性和方法。Customized built-in elements 必须使用
extends关键字来定义。
2. 创建 Custom Elements
创建 Custom Elements 需要遵循以下步骤：
2.1. 定义类
首先，我们需要定义一个类来表示 Custom Elements。这个类需要继承 HTMLElement 或其子类，以便我们可以使用所有的 HTML 元素属性和方法。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
-- ------- --- ----
-
---------------------- -
-- ---- --- ------
-
----------------- -
-- --------------
-
------------------------------ --------- --------- -
-- --------------
-
-2.2. 注册元素
当我们定义好类之后，我们需要将自定义元素注册到浏览器中，以便浏览器可以识别它们。我们可以使用 customElements 对象来完成这个任务。
customElements.define('my-element', MyElement);在这个例子中，我们将 MyElement 类注册为 my-element 元素。注意，元素名称必须包含一个短横线，以便它可以被视为一个自定义元素。
2.3. 使用元素
现在我们已经成功创建了一个 Custom Element，我们可以在 HTML 中使用它了。
<my-element></my-element>
3. 自定义属性和方法
Custom Elements 允许我们定义自己的属性和方法，以便我们可以更好地控制元素的行为。
3.1. 定义属性
我们可以通过定义 get 和 set 函数来定义自定义属性。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------- - ---
-
------------------- -
---------- - --------------------------
--------------
-
--- ----------- -
---------- - ------
--------------
-
--- ------ -
------ -----------
-
-------- -
-------------- - ----------- ---------------------
-
-在这个例子中，我们定义了一个 name 属性，当它被设置时，它会重新渲染元素。
3.2. 定义方法
我们可以将自定义方法添加到 Custom Element 类中，以便我们可以在需要时调用它们。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------- - ---
-
------------------- -
---------- - --------------------------
--------------
-
--- ----------- -
---------- - ------
--------------
-
--- ------ -
------ -----------
-
-------- -
-------------- - ----------- ---------------------
-
---------- -
------------------- -----------------
-
-在这个例子中，我们定义了一个 sayHello 方法，当它被调用时，它会在控制台中输出一条消息。
4. 示例代码
下面是一个完整的 Custom Elements 示例代码，它包含了一个 my-element 自定义元素，它有一个 name 属性和一个 sayHello 方法。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------- - ---
-
------------------- -
---------- - --------------------------
--------------
-
--- ----------- -
---------- - ------
--------------
-
--- ------ -
------ -----------
-
-------- -
-------------- - ----------- ---------------------
-
---------- -
------------------- -----------------
-
-
----------------------------------- -----------下面是如何使用 my-element 元素的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- -------- ----------
-------
------
----------- --------------------------
--------
----- --------- - -------------------------------------
---------------------
-------------- - -------
---------
-------
-------5. 总结
Custom Elements 是 Web Components 的一部分，它允许开发者创建自定义的 HTML 元素，并可以将其重复使用在不同的页面上。本文介绍了如何创建功能完善的 Custom Elements，包括定义自定义属性和方法。Custom Elements 可以让开发者更好地管理和组织代码，提高代码的可重用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6506b73c95b1f8cacd26d921