前言
随着 Web 应用程序的不断发展，前端技术也在不断进步和演变。从最初的静态网页到动态网页，再到以组件化和模块化为中心的现代 Web 应用程序，前端开发者需要掌握的技术也愈加复杂和丰富。Custom Elements 就是其中一个重要的技术之一。
Custom Elements 是 Web 组件规范的一部分，它可以让开发者定义自己的 HTML 元素。在 Custom Elements 中，你可以自定义元素的属性、方法和事件等。它为实现 Web 应用程序的可重用组件提供了便利。
本文将深入讲解 Custom Elements 中的属性和方法，并通过示例代码进行演示。
属性
定义属性
在 Custom Elements 中，你可以使用 constructor 构造函数来定义属性。先看一下下面的示例代码：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
--------------- - --------- -------
-
-
--------------------------------------- ---------------在这个示例中，我们给自定义元素 custom-element 添加了一个属性 myProperty，并将其初始值设为 'original value'。这就是定义一个属性的基本方式。
访问和修改属性
当你定义了一个自定义元素的属性后，你可以通过以下两种方式来访问和修改它：
1. 直接使用对象属性
自定义元素对象可以像普通 JavaScript 对象一样直接访问和修改属性：
const customElement = document.createElement('custom-element');
console.log(customElement.myProperty); // 'original value'
customElement.myProperty = 'new value';
console.log(customElement.myProperty); // 'new value'在这个示例中，我们通过创建 custom-element 的实例 customElement 并访问其属性 myProperty 来输出 'original value'。之后将属性的值修改为 'new value' 并再次输出。
2. 使用 setter 和 getter
除了直接访问属性之外，你也可以使用 JavaScript 中的 setter 和 getter 方法来访问和修改属性。通过这种方式，你可以在属性被访问或修改时执行一些额外的操作。例如：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
---------------- - --------- -------
-
--- ------------ -
------ -------------------------------
-
--- ----------------- -
---------------- - --------------------
-
-
--------------------------------------- ---------------在这个示例中，我们重新定义了属性 myProperty 的 getter 和 setter 方法。在 getter 中，我们将属性值转换为大写；在 setter 中，我们将传入的值转换为小写。这两个方法的执行可以在属性值被访问或修改时自动触发。
监听属性变化
你可以使用 attributeChangedCallback 方法来监听自定义元素属性值的变化。当属性值发生变化时，该方法将被自动调用。
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
--------------- - --------- -------
-
------ --- -------------------- -
------ ----------------
-
------------------- -
-------------------------------- ---- --------
-
------------------------------ --------- --------- -
---------------------- ------- ------- ---- ----------- -- --------------
-
-
--------------------------------------- ---------------在这个示例中，我们通过 observedAttributes 方法告诉浏览器我们要监听 my-property 属性的变化。通过 connectedCallback 方法将 my-property 的值设置为 'new value'，然后 attributeChangedCallback 方法将被调用，同时打印出属性变化的细节。
方法
定义方法
在 Custom Elements 中，你可以在定义自定义元素时使用 class 关键字来定义方法。这些方法在自定义元素被创建或调用时将被执行。例如：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
--------------- - --------- -------
-
---------- -
------------------- ---------
-
-
--------------------------------------- ---------------在这个示例中，我们定义了一个名为 myMethod 的方法，并在其中打印了一行 'Hello, world!'。
调用方法
与属性访问类似，你可以使用直接使用对象方法或事件监听器等方式来调用自定义元素中的方法：
const customElement = document.createElement('custom-element');
customElement.myMethod(); // 'Hello, world!'在这个示例中，我们直接调用自定义元素 custom-element 中的方法 myMethod 并打印了 'Hello, world!'。
总结
Custom Elements 是一种非常有用的 Web 组件规范，它让开发者可以很容易地定义自己的 HTML 元素并在其中添加属性、方法和事件等。本文中，我们深入讲解了如何通过 Custom Elements 定义属性和方法，并提供了大量实例代码进行演示。希望本文能对你理解和使用 Custom Elements 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f8b1c980a9b385b8faed6