前言
Custom Elements 是一个 Web 标准，它允许开发者扩展 HTML 元素的功能，以便能够更轻松地创建自定义元素。 Custom Elements 具有的核心特性是它们允许开发者创建自定义标签，并为这些标签添加行为。本文将介绍如何在 Custom Elements 中使用属性和方法。
属性
定义属性
在 Custom Elements 中，您可以定义自定义属性。定义属性一般需要在你的自定义元素类的构造函数中进行，其中我们可以使用 this 对象来定义：
class MyCustomElement extends HTMLElement {
constructor() {
super();
this.myAttribute = 'default value';
}
// ...
}获取属性值
定义属性之后，需要在 Custom Elements 的生命周期中访问它们。在 Custom Elements 中，您可以使用 getAttribute() 方法获取元素属性的值：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
---------------- - -------- -------
-
------------------- -
-----------------------------------------------
-
-在上面的 code 中，我们使用 getAttribute() 方法获取 my-attribute 属性的值。
设置属性值
设置属性值也很简单，只需要使用 setAttribute() 方法即可：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
---------------- - -------- -------
-
------------------- -
--------------------------------- ---- --------
-
-监听属性变化
在 Custom Elements 中，您可以监听属性变化，如下所示：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
---------------- - -------- -------
-
------ --- -------------------- -
------ -----------------
-
------------------------------ --------- --------- -
---------------------- ------- -------- ----------- -- --------------
-
------------------- -
--------------------------------- ---- --------
-
-通过定义 observedAttributes 静态方法，指定您想要监听的属性的名称数组，当属性的值发生变化时，attributeChangedCallback 方法将被调用并且传递原始值、新值和属性名称。
方法
定义方法
在 Custom Elements 中，您可以定义自定义方法。方法定义可以是类方法或成员方法。下面是一个简单的示例：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
---------------- - -------- -------
-
---------- -
--------------- ------ --- ----------
-
------------------- -
----------------
-
-在属性和方法之间进行通信
您可以使用属性从方法中检索信息，也可以调用方法来设置属性的值。例如，我们可以使用方法 setMyAttribute 来定义属性的值：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
---------------- - -------- -------
-
--------------------- -
---------------- - ------
---------------------- --------------------------------- -
------- -
--------- -----
-
----
-
------------------- -
------------------------ --------
-
-在上面的示例中，我们定义了一个 setMyAttribute 方法，该方法用于设置自定义属性的值，并使用 dispatchEvent 方法触发 myAttributeChanged 事件。
监听自定义事件
自定义元素可以使用 addEventListener 方法监听自定义事件，如下所示：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
---------------- - -------- -------
-
--------------------- -
---------------- - ------
---------------------- --------------------------------- -
------- -
--------- -----
-
----
-
------------------- -
------------------------ --------
------------------------------------------- - -- -
--------------- --------- -------- -----------------------
---
-
-在上面的示例中，我们定义了一个事件监听器，该监听器由 addEventListener 方法触发，当收到自定义事件时，它将在控制台上打印出 newValue 值。
结论
本文介绍了 Custom Elements 中属性和方法的使用，包括定义属性、获取和设置属性值、监听属性变化以及定义和调用方法。通过在 Custom Elements 中使用属性和方法，您可以更完全地控制自定义元素的行为，并创建具有更好可重用性的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f43e62f40ec5a964e997b3