什么是 Custom Elements？
Custom Elements 是 Web Components API 的一部分，它允许开发者定义自己的 HTML 标签。通过使用 Custom Elements，开发者可以创建像 <my-component> 这样的标签，并在该标签被使用的时候，自动运行指定的 JavaScript 代码。Custom Elements API 是由 W3C 标准化的。
HTML 解析器简介
HTML 解析器是一种将 HTML 代码转换为文档对象模型（DOM）的程序，DOM 是文档的通用表示形式，它定义了一个结构化的节点树，这个节点树可以被程序访问和操作。HTML 解析器解析 HTML 代码时，会把 HTML 代码转换为一个 DOM 树，这棵树会包含各种 HTML 标签、文本节点、注释等等。
使用 Custom Elements 和 HTML 解析器，我们可以创建自定义的 HTML 标签，并在这些标签被使用的时候自动运行指定的 JavaScript 代码。让我们来看一下如何实现这个功能。
第一步：定义 Custom Element
-- -------------------- ---- -------
---- ---------------- ---
--------- ---------------------------
----------- ------------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - --------
----------------------------------------
-------------------------
------------------- ----- ------ -------------------------
-
-
------------------------------------- -------------
---------上面的代码定义了一个 MyComponent 类，这个类继承自 HTMLElement，表示它是一个自定义的 HTML 标签。在类的构造函数里，我们使用了 importNode 方法将模板转换为 DOM 对象，并使用 attachShadow 方法将它添加到 Shadow DOM 中。
最后一步是调用 customElements.define 方法，将这个组件注册到自定义元素中，这个方法的第一个参数是我们想要注册的元素名，第二个参数是这个元素的构造函数。
第二步：在 HTML 文件中使用自定义标签
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- --------------- --
------------- ------- ------------
------- ------------------------------
-------
------
-----------------------------
-------
-------在 HTML 文件中，我们可以直接使用自定义标签 <my-component>，浏览器会自动调用 MyComponent 类的构造函数来渲染这个标签。
总结
通过自定义标签，我们可以在 HTML 中添加自己的组件，使页面更具有可读性和可重用性。使用 Custom Elements 和 HTML 解析器，我们可以创建自定义文档类型，并自动运行指定的 JavaScript 代码。希望这篇文章对你有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a35fcbadd4f0e0ffb818cc