什么是 Custom Elements
Custom Elements 是 Web Components 规范的一部分，它允许开发者自定义 HTML 元素，并在页面中使用它们。这些自定义元素可以拥有自己的属性和方法，可以被添加到 DOM 树中，也可以被绑定事件。
Custom Elements 规范分为两部分：
- 定义一个自定义元素的 API，包括元素的名称、属性、方法和生命周期钩子等。
- 实现这个 API，创建一个可重用的自定义元素类。
创建一个 HelloWorld 组件
下面我们来创建一个简单的 HelloWorld 组件，它可以输出一段问候语。
定义元素 API
首先，我们需要定义 HelloWorld 组件的 API，包括元素名称和属性。
----- ---------- ------- ----------- -
------------- -
--------
------------ - ------- --------
-
------ --- -------------------- -
------ ------------
-
------------------- -
-------------- - -------------------------
-
------------------------------ --------- --------- -
-- ----- --- --------- -- -------- --- --------- -
------------ - ---------
-------------- - -------------------------
-
-
-
------------------------------------ ------------以上代码中：
HelloWorld继承自HTMLElement，表示我们要创建一个 HTML 元素。constructor方法中定义了message属性的初始值。observedAttributes方法返回一个数组，包含了我们要观察的属性名。connectedCallback方法在元素被添加到 DOM 树中时调用，它设置了元素的 HTML 内容。attributeChangedCallback方法在元素的属性值发生改变时调用，它更新了元素的 HTML 内容。
创建元素实例
现在我们可以在 HTML 中使用 hello-world 元素了：
---------------------------
这会创建一个空的 hello-world 元素。我们可以通过设置它的 message 属性来修改它的问候语：
------------ ------------ ----------------------
这会创建一个带有自定义问候语的 hello-world 元素。
总结
Custom Elements 是 Web Components 规范的一部分，它允许开发者自定义 HTML 元素，并在页面中使用它们。我们可以通过定义元素的 API 和实现这个 API，创建一个可重用的自定义元素类。在本文中，我们创建了一个简单的 HelloWorld 组件，并介绍了 Custom Elements 的基本用法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/656a8386d2f5e1655d2eb2ee