概述
Custom Elements 是 Web Components 规范的一项重要技术，通过它我们可以自定义 HTML 元素，并且使用 JavaScript 编写其行为和样式，让其拥有更高的可重用性和灵活性。本文将总结前人经验，提供参考，分享 Custom Elements 的编程经验。
定义 Custom Elements
定义 Custom Elements 可以使用 window.customElements.define 方法，该方法接受两个参数，第一个是元素名，第二个是自定义元素类的定义。示例如下：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- ---
-
-- ---
-
------------------------------------------ -----------上述代码定义了一个名为 my-element 的 Custom Element，并将其类定义为 MyElement。其中 HTMLElement 是 Custom Elements 的基础类，所有自定义的元素都必须继承自它。
元素的生命周期
Custom Elements 有四个生命周期函数，分别是 connectedCallback、disconnectedCallback、adoptedCallback 和 attributeChangedCallback，用于在元素生命周期中执行特定的操作。
connectedCallback
当自定义元素第一次被插入到文档 DOM 中或重新被插入到文档 DOM 中时，connectedCallback 方法被调用。在该方法中，可以初始化元素的一些属性或执行一些初始化操作。
connectedCallback() {
console.log('Custom element connected');
}disconnectedCallback
当自定义元素从文档 DOM 中删除时，disconnectedCallback 方法被调用。在该方法中，可以清理元素的一些状态或执行一些清理操作。
disconnectedCallback() {
console.log('Custom element disconnected');
}adoptedCallback
当自定义元素被移动到一个新的文档中时，adoptedCallback 方法被调用。在该方法中，可以执行一些元素在新文档中的适应操作。
adoptedCallback(oldDocument, newDocument) {
console.log('Custom element adopted');
}attributeChangedCallback
当自定义元素的属性值发生改变时，attributeChangedCallback 方法被调用。在该方法中，可以根据属性的变化做出相应的响应。
attributeChangedCallback(name, oldValue, newValue) {
console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);
}属性和方法
自定义元素可以定义属性和方法，使得其具有更多的功能和交互性。
属性
属性可以通过 getter 和 setter 方法定义，如下：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -- ---- --
---------- - ---
-
--- ------ -
------ -----------
-
--- ----------- -
---------- - ------
------------------------- -------
-
-- ---
-上述代码定义了一个 name 属性，当该属性值变化时，会自动调用 setAttribute 方法。使用方式如下：
<my-element name="Tom"></my-element>
方法
自定义元素可以定义方法，使得其具有更多的行为和动作。示例代码如下：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
-- ---- -------- --
---------- -
---------------------
-
-- ---
-使用方式如下：
const el = document.createElement('my-element');
el.sayHello(); // 输出 'Hello'样式
样式可以通过在 Custom Elements 类中定义一个 shadowRoot 和相应的 CSS 样式来实现。示例代码如下：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -- ----------
----------- - ------------------- ----- ------ ---
-- ---- --- --
-------------- - ------------------------------
-- ----
----- ----- - --------------------------------
----------------- - -
---------- -
----------------- --------
-------- -----
-
--
-------------------------------
-- ----
----------------------------------------
-
-- ---
-上述代码创建了一个 div 容器，并添加了一个灰色背景和一定的内边距。使用方式如下：
<my-element></my-element>
总结
以上是对 Custom Elements 的概述和使用，Custom Elements 是 Web Components 技术中不可或缺的一部分，可以大大提高 Web 开发的可重用性和可维护性。希望本文能够对大家了解和使用 Custom Elements 起到帮助和指导作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492733f48841e9894042d79