什么是 Custom Elements
Custom Elements 是 Web Components 的一部分，它允许我们创建自定义的 HTML 元素，提供了一种更自然，更有意义的开发方式，能够解决现有的很多问题。
如何创建 Custom Elements
Custom Elements 的创建其实很简单，只需要继承 HTMLElement 类，然后注册一个新的自定义元素即可。
以下是一个示例代码，我们先创建一个名为 my-element 的自定义元素：
<my-element></my-element>
然后，我们可以在 JavaScript 中定义这个元素：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- --------------
-
-
------------------------------------------ -----------现在，我们的自定义元素已经创建完毕。
自定义元素的生命周期
自定义元素有几个生命周期钩子，可以在元素在各个不同阶段发生特定事件时运行代码。 下面是这些钩子的一些示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-------------------
-
------------------- -
--------------------
-
---------------------- -
--------------------
-
----------------- -
----------------------
-
---------------------------------- ------- ------- -
--------------------------------------------------------------
-
-
------------------------------------------ -----------元素内容和属性
我们可以通过自定义元素的属性和内容来控制元素的行为。 下面是一个示例，我们在自定义元素内定义一个属性 name：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------ --- -------------------- -
------ ---------
-
---------------------------------- ------- ------- -
-- --------- --- ------- -
--------------
-
-
------------------- -
--------------
-
-------- -
----- ---- - --------------------------
-------------- - ---------- ---------------
-
-
------------------------------------------ -----------现在，当我们使用我们的自定义元素并设置名称属性时，它会显示一个相应的欢迎信息：
<my-element name="World"></my-element>
元素样式
我们可以使用 CSS 来样式化自定义元素，它像任何其他标准 HTML 元素一样工作。 在自定义元素的样式和作为自定义元素的 CSS 之间没有区别。
下面是一个示例：
-- -------------------- ---- ------- ---------- - -------- ------ ------- ---- ----- -------- ----- ----------------- ----- ------- --- ----- ----- ------ ------ - ---------- -- - ---------- ----- ----------- ------- -
结论
通过自定义元素，我们可以创建具有特殊功能的元素，同时将复杂的结构封装为易于使用的组件，有利于我们的开发速度和维护工作的效率。
因此，在开发前端工具和组件时，我们应当为之考虑自定义元素的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6705fdf3d91dce0dc8568412