什么是 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.html -->
<template id="my-component-template">
<div>Hello, World!</div>
</template>
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
const template = document
.getElementById('my-component-template')
.content.cloneNode(true);
this.attachShadow({ mode: 'open' }).appendChild(template);
}
}
customElements.define('my-component', MyComponent);
</script>上面的代码定义了一个 MyComponent 类，这个类继承自 HTMLElement，表示它是一个自定义的 HTML 标签。在类的构造函数里，我们使用了 importNode 方法将模板转换为 DOM 对象，并使用 attachShadow 方法将它添加到 Shadow DOM 中。
最后一步是调用 customElements.define 方法，将这个组件注册到自定义元素中，这个方法的第一个参数是我们想要注册的元素名，第二个参数是这个元素的构造函数。
第二步：在 HTML 文件中使用自定义标签
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Custom Element Demo</title>
<script src="MyComponent.js"></script>
</head>
<body>
<my-component></my-component>
</body>
</html>在 HTML 文件中，我们可以直接使用自定义标签 <my-component>，浏览器会自动调用 MyComponent 类的构造函数来渲染这个标签。
总结
通过自定义标签，我们可以在 HTML 中添加自己的组件，使页面更具有可读性和可重用性。使用 Custom Elements 和 HTML 解析器，我们可以创建自定义文档类型，并自动运行指定的 JavaScript 代码。希望这篇文章对你有帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a35fcbadd4f0e0ffb818cc