什么是 Custom Elements
Custom Elements 是ES6中一个非常实用的功能，它可以让我们自定义 HTML 元素。 相信大家都曾使用过 HTML 标记元素，如
等等。这些标记元素都是浏览器所预定义的元素。而 Custom Elements 就是我们自己定义的 HTML 元素。
具有自定义元素的能力有很多好处，例如有了自定义元素就可以定义更符合语义的 HTML 标记，可以快速编写自己的组件或者 UI 库等等。
如何创建 Custom Elements
创建一个新的 Custom Elements 需要实现两个步骤，一个是定义元素，一个是注册元素。
定义元素
定义元素的方式很简单，只需要继承 HTMLElement 即可。
----- --------------- ------- ----------- --
这时候我们已经定义了一个新的 HTML 元素。不过它还不是一个 Custom Element，它需要注册才可以正式生效。
注册元素
注册元素的方式有两种：
方法1：使用 document.registerElement()
----- --------------- ------- ----------- -- --------------------------------- -----------------
方法2：使用自定义元素的注册方法
----- --------------- ------- ----------- -- ------------------------------ -----------------
方法2更加推荐。因为 registerElement() 方法已经被废弃了，而且方法1定义的元素不支持继承，方法2定义的元素则支持继承，更符合未来发展的趋势。
定义好了元素，注册好了元素，那么这个元素就可以在 HTML 中使用了。
---------------
元素生命周期
Custom Elements 元素有生命周期，这些生命周期会在元素第一次被创建时调用。了解元素的生命周期能够让我们更好的管理自己创建的元素。
constructor(): 构造函数，在元素被新建时调用，用来初始化元素的状态。注意，在这里我们还不能访问元素的 shadow DOM 和 child nodes。connectedCallback(): 元素插入到 DOM 中时调用，可以在这里初始化元素的 shadow DOM 和 child nodes。disconnectedCallback(): 元素被从 DOM 中移除时调用，可以在这里清理元素的状态。attributeChangedCallback(): 属性值发生变化时调用，可以在这里处理相关的业务逻辑。adoptedCallback(): 当元素被移动到新的 document 中时，调用。在多个 document 之间共享元素时可能会用到。
实现一个自定义元素
下面是一个简单的自定义元素示例，用来展示如何定义和注册一个 Custom Elements。
----- --------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-
------------------- -
------------------------- - -
-------
-- -
------ ----
-
--------
---------- ----------------------------------
--
-
------------------------------ --------- --------- -
-- ----- --- ------- -
----------------------------------------------- - ------- --------------
-
-
-
-------------------------------- -----------------上面这个 MyCustomElement 元素可以接受一个 name 属性，用来渲染一个带有样式的标题。
-------- ----------------------------
这里我默认 name 属性为 "JavaScript"，你也可以随意修改。修改后将看到一个基于 Custom Elements 的元素。
总结
Custom Elements 是 JavaScript ES6 中的一个重要特性。了解 Custom Elements 能让我们更好地理解 Web Components，并且便于我们创建自定义 HTML 元素。 Custom Elements 元素有着独立的生命周期，通过它们实现的元素可以达到封装化的效果，提高代码的可维护性。
在实际开发中，我们可以通过使用 Custom Elements 创建自己的组件库，实现更好的开发效率，涉及更深的技术实现和探究，希望大家可以继续深入研究。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6644ba44d3423812e429e2a3