概述：
Custom Elements 是 Web 组件规范的一部分，它允许开发者创建自定义的 HTML 元素，以扩展 HTML 自带的元素集。借助 Custom Elements，开发者可以轻松地创建不同类型的 UI 元素，达到更好的可维护性和可读性。
Custom Elements 有以下优点：
- 可重用性：开发者只需要定义一个 Custom Element，便可以在不同的页面和项目中重复使用。
- 解耦性：Custom Elements 的创建和实现与项目的其余部分解耦，以便更好的组织和管理代码。
- 易维护性：Custom Elements 可以大大减少模板化代码，缩短了代码编写的时间，同时也减少了代码的维护成本。
创建 Custom Elements
要创建 Custom Elements，我们需要使用 window.customElements API。除此之外，我们还需要使用 extends 关键字来扩展 HTML 元素的基类。下面是一个示例：
-- -------------------- ---- -------
----- ----------- ------- ----------------- -
-- -----------
------------- -
-- ------ ----- -----------
--------
-- --- ---------
------------------------ ---------
----- ---------- - ----------------
-- ------ --- ------ -- ------- -- ---------
----- ------- - ------------------------------
----------------------------- ----------------
---------------------------
-
-
-- ------ ------ -------
------------------------------------- ------------ --------- -----------在上面的代码中：
- 使用 class 关键字定义了一个名为 FancyButton 的类，该类扩展了 HTMLButtonElement 类。
- 将这个类命名为 fancy-button，并将它扩展至 button 元素上。
- 在 constructor 构造函数中，使用 attachShadow API 添加了一个 shadow DOM。
- 然后，创建了一个 div 用于 wrapper，然后追加到了 shadowDOM 中。
以上代码运行后，我们将看到一个扩展按钮元素的“fancy-button”。
定制 Custom Elements
通过使用 Custom Elements 方案，我们不仅可以创建自己的元素，而且还可以灵活地控制它们的行为。下面是一些方法：
- connectedCallback：该方法在元素首次连接到文档 DOM 时被调用，用于在页面上渲染元素，并在页面中显示自定义的控件。
- disconnectedCallback：该方法在元素从文档 DOM 中被移除时调用，用于清除元素和事件。
- attributeChangedCallback：该方法在元素的属性被添加、删除或修改时被调用。
下面是一个示例：
-- -------------------- ---- -------
----- ------------ ------- ----------- -
-- ---------- --------------
------ --- -------------------- -
------ ------------
-
-- --------- --------
------------------- -
----- ------- - -----------------------------
-------------- - -------------
-
-- ------------- --------
---------------------- -
-------------------- ---- ------
-
-- --------- -------- --------
------------------------------ --------- --------- -
-- --------- --- --------- -
---------------------- -----------
-
-
-- ---------------
--- -------------- -
---------------------------- -------
-
--- --------- -
------ -----------------------------
-
-
-- ------ ------ -------
---------------------------------------- --------------在上面的代码中：
- class 名为 Notification，扩展了 HTMLElement 类。
- 使用 static get observedAttributes() 方法创建属性观察器数组。（可选）
- 使用 connectedCallback() 方法，在元素被连接到文档时的回调函数内渲染了 message 属性中的值。
- 使用 disconnectedCallback() 方法，在元素从文档中被移除时的回调函数中记录了一条日志消息。
- 使用 attributeChangedCallback() 方法，当属性改变时，打印一条信息。
- 定义了属性读取器和设置器，分别用于设置和读取 message 属性。
结论：
Custom Elements提供了一种简单的方法来创建定制的 HTML 元素，该元素完全与 Web Components 兼容。开发者可以将此作为他们开发的模块，模板或 Web 应用程序的一部分，以实现高性能，流畅和易于管理的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e575e947dc5bcb30a778d