什么是 Custom Elements
Custom Elements 是 Web Components 规范中的一部分，它允许开发者创建自定义的 HTML 元素，并对其行为进行控制。
通过 Custom Elements，开发者可以扩展 HTML 元素的定义，实现自定义的行为、样式和属性。开发者可以使用 JavaScript 定义一个 Custom Element 构造函数，并将其注册到浏览器中，然后这个自定义的 HTML 元素就可以在页面中使用了。
如何使用 Custom Elements
使用 Custom Elements 需要遵循以下步骤：
- 创建一个自定义的 HTML 元素类（Inherit from HTMLElement）
- 添加适当的方法和属性，用于控制元素的行为
- 使用 customElements.define() 方法将该类与一个标签名称关联
- 在 HTML 中使用该自定义元素
在下面的示例代码中，我们展示了如何创建一个叫做 "my-element" 的自定义元素。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -------
--------- - --------
-
-- ------------
------------------- -
-------------- - ------- ---------------
-
-- -------
------------------------------ --------- --------- -
-- ----- --- ------- -
-------------- - ------- --------------
-
-
-- ---------
------ --- -------------------- -
------ ---------
-
-
-- -------
----------------------------------- -----------在上面的代码中，我们创建了一个叫做 "MyElement" 的自定义元素类。该元素具有一个名为 "name" 的属性，并覆盖了 connectedCallback、attributeChangedCallback 和 observedAttributes 方法。
通过调用 "customElements.define()" 方法并将 "MyElement" 类与 "my-element" 标签名称关联，我们将该自定义元素引入到了页面中。此时，我们可以在 HTML 中直接使用 "my-element" 标签，并控制其行为。
<my-element name="Jack"></my-element>
在上面的示例中，我们定义了 name 属性为 "Jack"，因此该元素会在被添加到文档时打印出 "Hello, Jack!"。
总结
通过 Custom Elements，开发者可以创建自定义的 HTML 元素，并对其行为进行控制。在实现自定义 HTML 元素时，我们需要定义一个相应的类，并通过 customElements.define() 方法将其与标签名称关联。同时，我们需要在类中实现一些方法用于控制元素的行为。
Custom Elements 的应用范围非常广泛，例如实现组件化开发、封装常用的 UI 类型等。开发者可以通过阅读相关文档和实践来掌握其应用方法，从而提高页面开发的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471d86a968c7c53b0fc2879