HTML是Web开发中最重要的技术之一，提供了基本的页面结构和内容展示。但是，HTML标记有固定的元素，添加新元素需要通过JavaScript来生成，这样增加了开发的难度。不过，现在我们有自定义元素（Custom Elements）这一新技术可以实现很多炫酷的功能。
本文将介绍自定义元素的基本知识，向您展示如何创建自己的HTML元素，并通过实例说明其实用性和灵活性。
什么是自定义元素？
自定义元素是一种新的Web API，允许我们定义自己的HTML元素。使用自定义元素，我们可以自定义元素的标记和功能。自定义元素是以<my-element>这样的标签名称创建的，就像其他HTML元素一样。
自定义元素 API包含一组构造函数和特定方法（例如其生命周期方法和属性的getter和setter），它们允许我们将其当作传统 HTML 元素来使用。
如何创建自定义元素
要创建自定义元素，首先我们需要定义一个类，通常都是继承HTMLElement类，这个类将定义自己想要创建的元素的行为，方法和属性。继承后的自定义元素所需要的构造函数如下：
class MyElement extends HTMLElement {
constructor() {
super();
}
}现在，我们已经定义了一个新类，MyElement。我们接下来要添加自己的方法和属性。例如，我们要添加一个名为MyElement的新自定义元素，它显示一个红色的圆形，其HTML标记为：
<my-element></my-element>
我们可以用下面的代码来编写自定义元素的构造函数：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- -------- - -
-------
--- -
------ ------
------- ------
-------------- ----
----------------- ----
-
--------
-----------
--
-------------------- - ---------
-
-在上面的代码中，我们创建了一个名为MyElement的元素。首先，我们使用attachShadow来创建一个新的shadow DOM节点。在shadow DOM树中，我们可以添加这个元素的内部结构。接下来，我们创建一个CSS样式，定义一个红色圆形，然后把它添加到shadow DOM节点中。此时，我们用innerHTML将模板添加到shadow DOM节点中后，模板中的内容（即CSS样式和圆形）即成为最终的DOM结构。
现在，当我们在HTML中添加一个名为<my-element>的元素时，将会显示一个红色的圆形。
在上述代码的构造函数中，innerHtml是一种常见的用HTML字符串来创建DOM内容的方法，但也可以使用createElement和 appendChild方法等。
相关方法
Custom Elements有许多与生命周期有关的方法，实现自定义元素时非常有用。其中最基本的两个方法是：
connectedCallback()
当Custom Element被添加到DOM中时，connectedCallback方法将被调用。通常，继承了 HTMLElement 的自定义元素中我们可以重写这个方法。
下面是一个例子，在connectedCallback()方法中我们给自定义元素h1标签的文本添加一些额外的文本内容：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- ------- - ---------------------------- -- --
-------------------- - -
-------------------
--
-
------------------- -
----- -- - ------------------------------------
----- --------- - ------------------------------- -- -------- ----- -----
-------------- -- -- --------------
-
-
------------------------------------------ -----------这个自定义元素使用connectedCallback()来自定义添加文本。
attributeChangedCallback()
自定义元素中除了connectedCallback外还有其他的生命周期方法如下：
- **disconnectedCallback()：**当Custom Element被从DOM中删除时调用。
- **attributeChangedCallback(attributeName, oldValue, newValue):**自定义元素中属性发生改变时调用的方法。其中，参数分别是相应的属性名称、旧值和新值。
下面是一个例子，自定义元素当自定义属性改变时，会更新显示文本：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- ------- - ---------------------------- -- --
-------------------- - -
-------------------
--
-
--------------------------------------- --------- --------- -
----- -- - ------------------------------------
-- -------------- --- ------------- -
-------------- - ---------
-
-
-
---------------------------- - ---------------
------------------------------------------ -----------在这个例子中，我们重写了attributeChangedCallback方法，该方法用于监视‘extra-text’属性的更改。当该属性的值改变时，我们通过查询元素的shadowRoot来获得元素的顶级节点，然后重新将文本内容赋给h1。
注册自定义元素
我们定义并实现自定义元素的最后一步是将其注册，方法是调用customElementsAPI的**define()**方法。
window.customElements.define('my-element', MyElement);在以上代码中，"my-element"是元素的自定义名称，"MyElement"是我们定义的类名称。
此时我们已经成功创建自定义元素，可以直接在HTML中使用自定义元素了。
下面是一个完整的示例代码：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- -------- - -
-------
--- -
------ ------
------- ------
-------------- ----
----------------- ----
-
--------
-----------
--
-------------------- - ---------
-
------------------- -
--------------- ------- -- --- -----------
-
---------------------- -
--------------- ------- -- --- ---------------
-
--------------------------------------- --------- --------- -
---------------------- ---------------- ------- ---- ----------- -- --------------
-
-
------------------------------------------ -----------如果您在页面上添加如下HTML元素，即可看到效果：
<my-element></my-element>
结论
自定义元素非常有用，可以将重复的代码和公共的UI组件封装在一起，以便在各个项目中复用。此外，自定义元素是创建可读性和可维护性高的Web应用程序的关键组成部分。
在这里，我们深入探讨了如何创建自定义元素及其相关方法，并介绍了如何向页面中添加自定义元素。希望本文可以增加您的技术见识。需要指出的是，随着技术的发展，这里所介绍的只是简单的入门级别，实现起来很容易，但是更为复杂的自定义元素开发还有很多需要学习的东西。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d6512a336082f254d2884