什么是 Custom Elements
Custom Elements 是一组 API，提供了一种在浏览器中创建自定义元素的方法。通过这些 API，开发者可以创建出自定义的 HTML 标签，并在应用中使用它们，达到封装组件的目的。
Custom Elements API 是 Web Components 技术的一部分，它与 Shadow DOM 和 HTML Templates API 组成了 Web Components 技术栈的三大块。
Custom Elements API 的使用方法
Custom Elements API 主要由两个方法组成：
customElements.define()
customElements.define() 方法用于定义 Custom Element，它的参数包含两个：
tagName：自定义元素的名称，必须包含一个连字符（如my-element）。class：Custom Element 的类，必须继承自 HTMLElement，这样才能被浏览器解析为自定义元素。
下面是一个简单的示例代码：
class MyElement extends HTMLElement {
constructor() {
super();
// 这里可以初始化组件的一些属性和状态
}
}
customElements.define('my-element', MyElement);在上面的代码中，我们定义了一个名为 my-element 的 Custom Element，它的类名是 MyElement。
connectedCallback()
connectedCallback() 方法在元素被插入到文档流中时被调用，我们可以在这里添加元素的一些逻辑：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -----------------
-
------------------- -
-- --------------
-
-在这个方法中，我们可以为元素设置样式、添加子元素等。
注意事项及技巧
Custom Elements API 使用起来比较简单，但在实际的开发中还是有一些需要注意的事项和技巧。
注意命名规范
Custom Element 的名称必须包含一个连字符，这是因为 HTML 规范中规定了所有标签名必须要有连字符。
在为 Custom Element 命名时，需要注意避免和现有的 HTML 标签或第三方库中的标签重名。通常我们为自定义元素添加前缀或命名空间以避免名称冲突，例如 my- 或 x- 等前缀。
使用 Shadow DOM 增强封装性
封装性是组件化开发的重要特点之一，而 Shadow DOM 可以在 Custom Element 内部创建一颗独立的 DOM 树，隔离了 Custom Element 内部和外部的样式和逻辑，从而提高了组件的封装性。
在定义 Custom Element 时，我们可以通过 attachShadow() 方法来创建 Shadow DOM：
class MyElement extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
// 创建 Shadow DOM 中的 HTML 内容并添加到 shadow 中
}
}在这个例子中，我们使用 attachShadow() 方法创建了一个开启模式的 Shadow DOM，并将其保存到 shadow 变量中，然后就可以在其中创建和添加 HTML 内容了。
提供公共接口
在实际的开发中，我们通常需要将一些组件的内部状态或属性暴露为公共接口，方便其他开发者在使用组件时进行配置和控制。
在 Custom Element 中，我们可以通过添加 getter 和 setter 方法为属性提供公共接口：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----------- - --
-
--- ------- -
------ ------------
-
--- --------------- -
----------- - ---------
-- ---------------------
-
-
----------------------------------- -----------在这个例子中，我们为自定义元素添加了一个名为 value 的属性，并添加了 getter 和 setter 方法，外部可以通过这个属性来获取和设置元素的值。
使用 Attributes
在 HTML 中，我们可以通过给标签添加属性来实现一些种种功能，而在 Custom Element 中也可以通过添加和监听属性来实现类似的功能。
在 Custom Element 中，我们可以通过 attributeChangedCallback() 方法来监听自定义属性的变化，并在变化时进行响应：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ ----------
-
------------- -
--------
-
--- ------- -
------ ---------------------------
-
--- --------------- -
-------------------------- ----------
-
------------------------------ --------- --------- -
-- ----- --- ------- -- -------- --- --------- -
-- -------------
-
-
-
----------------------------------- -----------在这个例子中，我们定义了一个名为 value 的属性，并在 observedAttributes 中声明了需要监听的属性。
当 value 属性发生变化时，attributeChangedCallback() 方法就会被调用，我们可以在这个方法中判断属性的变化，然后执行相应的逻辑。
成功注册和使用元素
在成功注册和使用 Custom Element 后，我们可以在 HTML 中直接使用它：
<my-element></my-element>
然后就可以在 JavaScript 中通过 document.querySelector() 等方法获取并操作这个元素了。
总结
Custom Elements API 是 Web Components 技术栈的核心之一，它允许我们创建自定义的 HTML 元素，这些元素可以封装特定的功能和逻辑，方便重复使用和维护。
在定义 Custom Element 时，需要注意命名规范、使用 Shadow DOM 增强封装性、提供公共接口和使用 Attributes 等技巧，这些都是提高组件开发效率和质量的关键。
建议开发者在实际的开发中尝试使用 Custom Elements API，结合 Shadow DOM 和 HTML Templates API 等技术，打造出更加高效和冗余的组件化开发流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b357d48841e9894813c44