前言
Web Components 是一种新的技术，它可以帮助我们创建可重用的定制化的 HTML 元素。在 Web Components 中，Custom Elements 就是其中的一种。Custom Elements 使我们可以创建自己的 HTML 元素，并为这些元素定义自己的属性和方法。其中，属性和事件都是 Custom Elements 中非常重要的部分，本文主要讲解 Custom Elements 中如何正确地使用属性和自定义事件。
属性
在 Custom Elements 中，属性就是一个元素的状态，它们的值可以从外部赋值，也可以在元素内部进行修改。在 Custom Elements 中，属性通常由用户自定义，并在元素的定义中声明。下面是一个简单的示例，演示了如何在 Custom Elements 中定义属性：
-- -------------------- ---- -------
--------- -----------------------------
-------
----- -
-------- ------
----------------- --------
-------- -----
-
--------
---- -------------------
-----------
--------
----- ------------- ------- ----------- -
------------- -
--------
----- -------- - ---------------------------------------------------------------------------
------------------- ----- ------ -------------------------
------------- - ------------------------------------------
-
--- --------- -
------ --------------------------
-
--- -------------- -
------------------------- - ------
-
------ --- -------------------- -
------ ------------
-
------------------------------ --------- --------- -
------ ------ -
---- ----------
------------ - ---------
------
-
-
-
--------------------------------------- ---------------
---------在上面的示例中，定义了一个 Custom Element，它有一个属性 content，该属性控制元素显示的内容。在元素的定义中，声明了这个属性，并在属性的 get 和 set 方法中定义了其行为。
它也声明了 observedAttributes 方法，该方法返回一个数组，包含 Custom Element 所观察的所有属性。在 attributeChangedCallback 方法中，当 Custom Element 中观察到属性的变化时，就会调用此方法，从而更新元素的状态。
自定义事件
在 Custom Elements 中，自定义事件是元素供外界与其进行交互的重要手段之一。通过自定义事件，我们可以让元素触发、监听和响应事件，从而实现与其他组件间的交互。下面是一个示例，它定义了一个 Custom Element，并定义了一个自定义事件 change。
-- -------------------- ---- -------
--------- -----------------------------
-------
----- -
-------- ------
----------------- --------
-------- -----
-
--------
---- -------------------
-----------
--------
----- ------------- ------- ----------- -
------------- -
--------
----- -------- - ---------------------------------------------------------------------------
------------------- ----- ------ -------------------------
------------- - ------------------------------------------
-
--- --------- -
------ --------------------------
-
--- -------------- -
------------------------- - ------
-
------ --- -------------------- -
------ ------------
-
------------------------------ --------- --------- -
------ ------ -
---- ----------
------------ - ---------
------
-
-
------------------- -
------------------------------ ---------------
-
---------------------- -
--------------------------------- ---------------
-
---------- -
---------------------- --------------------- -
-------- -----
----------- -----
------- - -------- ------ ---- ------ --------- -
----
-
-
--------------------------------------- ---------------
---------在上面的示例中，定义了一个 Custom Element，并在其中定义了自定义事件 change。在元素的代码中，我们定义了事件的触发方式 _onClick，并在 connectedCallback 中将其添加到元素上。当点击元素时，会触发自定义事件 change，从而向外界发送消息。
总结
在本文中，我们通过示例介绍了 Custom Elements 的两个重要组成部分：属性和自定义事件。通过正确地使用属性和自定义事件，我们可以很方便地实现自定义的 HTML 元素，并且与其他组件进行交互。同时，Custom Elements 为我们提供了更加灵活易用、可重用的解决方案，让我们的前端开发变得更加便捷高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647aec3d968c7c53b068699c