介绍
Custom Elements 是 Web Components 的基本组成部分之一，是一种可重复使用的独立组件，可以在任何 HTML 文档中使用。使用 Custom Elements，开发者能够拓展 HTML 中的元素，创造出自定义的 HTML 元素，丰富页面的功能和组件。
Custom Elements 有以下几个主要特点：
- 支持扩展 HTML 元素
- 具有独立的作用域
- 可重复使用
- 内容可控制
创建 Custom Elements
定义一个 Custom Element
创建 Custom Elements 的第一步是定义该元素。要创建自己的元素，必须要继承 HTMLElement 或它的子类。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ --- -- -- ------ ---
-
------------------- -
-------------- -- -- ------ ---
-
-------- -
------------------------- - -
-------
-- -- --
--------
-----
---- -- ---
------
--
-
-
------------------------------------------ -----------------如上所示，我们定义了一个 MyCustomElement 类，继承了 HTMLElement。在构造函数中，我们使用 attachShadow 方法创建了一个 shadow DOM。这里，我们将 shadow DOM 设置为 open 模式，这意味着外部组件可以访问 shadow DOM。
继承 HTMLElement 还允许我们覆盖并实现生命周期方法 connectedCallback，它在元素被添加到文档树中时被调用。在 connectedCallback 方法中，我们调用自定义的 render 方法，渲染 shadow DOM。
使用自定义元素
在定义了 Custom Element 之后，我们可以通过以下方式在页面中使用该元素：
<my-custom-element></my-custom-element>
注意，标签名必须是全小写的才能被正确解析。
传递数据
Custom Element 可以通过属性和事件的方式来传递和接收数据。
属性
可以像普通 HTML 元素一样给 Custom Element 设置和获取属性。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------ --- -------------------- -
------ --------- ----------
-
--- ------- -
------ ---------------------------
-
--- ------------ -
-------------------------- -------
-
--- -------- -
------ ----------------------------
-
--- ------------- -
--------------------------- -------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
-- ------
- ---- -- ----- --- --------- -
-- ------
-
-
-通过 observedAttributes 方法声明需要监听的属性名，可以在 attributeChangedCallback 方法中处理属性变化。
<my-custom-element width="100" height="200"></my-custom-element>
事件
可以在 Custom Element 中触发自定义事件，供外部组件监听和处理。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
----------- - ---
-
------------------- -
--------------
------------ - ---------------------------------------
-------------------------------------- -----------------------------
-
------------------ -
---------- - -------------------
---------------------- --------------------- - ------- - ------ ---------- - ----
-
--- ------- -
------ ------------
-
--- --------------- -
----------- - ---------
--------------
-
-------- -
------------------------- - -
-------
-- -- --
--------
-----
------ ----------- ----------------------
---- -- ---
------
--
-
-在上面的代码中，我们定义了一个 handleInput 方法，它会在 <input> 元素的 input 事件触发时被调用。我们在该方法中设置 Custom Element 的 value 属性，并触发一个 change 事件。之后，该元素就可以被其他组件监听该事件并获取元素的值。
const myCustomElement = document.querySelector('my-custom-element');
myCustomElement.addEventListener('change', (event) => {
const { value } = event.detail;
// 处理元素值的变化
});总结
通过创建 Custom Elements，我们可以拓展 HTML 中的元素，创造出自定义的 HTML 元素，丰富页面的功能和组件。同时，Custom Elements 具有独立的作用域和可重复使用的特点，使得组件能够更加易于维护和管理。
在实际开发中，除了以上的方法，还有一些高级 API 和技巧可以使用，如使用 JavaScript 的新语法和编写更加健壮的组件，这些内容需要进一步的学习和探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6473f038968c7c53b0167e8e