Custom Elements 是 Web Components 的一部分，它允许开发者创建自定义 HTML 元素并在网页中使用。这个功能的实现依赖于浏览器的原生 API，因此不需要使用任何框架或库就能实现。
应用场景
Custom Elements 可以用于创建一些特定的组件和控件，例如日历、轮播图、模态框等等。通过创建自定义元素，我们可以将这些组件封装在自己的 HTML 标签中，从而使得它们的使用变得更加方便。
此外，Custom Elements 还可以用于创建一些通用的组件，例如按钮、文本框、下拉框等等。这些组件可以在不同的项目中复用，从而提高代码的可维护性和可复用性。
实现细节
定义自定义元素
定义一个自定义元素需要使用 customElements.define() 方法，该方法接受两个参数：元素名称和元素类。
class MyElement extends HTMLElement {
constructor() {
super();
// 初始化代码
}
}
customElements.define('my-element', MyElement);在上面的代码中，我们定义了一个名为 my-element 的自定义元素，并指定了它的类为 MyElement。在类的构造函数中，我们可以添加一些初始化代码，例如添加事件监听器、创建子元素等等。
生命周期
自定义元素有一些特定的生命周期方法，可以在元素被创建、插入到文档中、从文档中移除等等时执行一些操作。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -----
-
------------------- -
-- ---------------
-
---------------------- -
-- --------------
-
------------------------------ --------- --------- -
-- ----------------
-
----------------- -
-- ----------------
-
-属性监听
自定义元素的属性可以通过 attributeChangedCallback() 方法来监听。在该方法中，我们可以获取到属性的名称、旧值和新值。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ -------- -------
-
------------- -
--------
-- -----
-
------------------------------ --------- --------- -
-- ----- --- ------- -
-- ---- ------
- ---- -- ----- --- ------ -
-- --- ------
-
-
-在上面的代码中，我们通过静态方法 observedAttributes 来指定需要监听的属性列表。
插槽
自定义元素可以使用插槽来传递内容。插槽可以在元素内部定义，并使用 slot 属性来标识。
<my-element> <div slot="header">这是头部</div> <div slot="body">这是内容</div> <div slot="footer">这是底部</div> </my-element>
在自定义元素的模板中，我们可以使用 slot 元素来指定插槽的位置。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -----
-
------------------- -
----- -------- - -----------------------------------
------------------ - -
---- ---------------
----- ---------------------
------
---- -------------
----- -------------------
------
---- ---------------
----- ---------------------
------
--
---------------------------------------------------
-
-在上面的代码中，我们通过 slot 元素来指定插槽的位置，然后在 connectedCallback() 方法中将模板插入到元素中。
示例代码
下面是一个简单的自定义元素示例，它可以用来创建一个带有标题和内容的卡片组件。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------ --- -------------------- -
------ ----------
-
------------- -
--------
----- -------- - -----------------------------------
------------------ - -
-------
----- -
------- --- ----- -----
-------- -----
-
------ -
------------ -----
-
--------
---- -------------
---- --------------------
---- ----------------
-------------
------
------
--
------------------- ----- ------ ---
--------------------------------------------------------------
-
------------------- -
----- ----- - ----------------------------------------
----------------- - ---------------------------
-
------------------------------ --------- --------- -
-- ----- --- -------- -
----- ----- - ----------------------------------------
----------------- - ---------
-
-
-
------------------------------------- -------------在上面的代码中，我们定义了一个名为 card-element 的自定义元素，并在元素的模板中使用了插槽。在元素的类中，我们使用了 shadowRoot 来封装元素的样式和结构。在 connectedCallback() 和 attributeChangedCallback() 方法中，我们分别监听了元素的插入和属性修改事件，并更新了元素的内容。
总结
通过 Custom Elements，我们可以创建自定义的 HTML 元素，并将其封装成组件和控件。在实现过程中，我们需要注意自定义元素的生命周期、属性监听和插槽等细节。自定义元素的应用场景非常广泛，可以用于创建一些特定的组件和控件，也可以用于创建一些通用的组件和控件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655751ced2f5e1655d1bd3f2