什么是 Custom Elements
Custom Elements 是 Web Components 规范的一部分，它提供了一种自定义 HTML 元素的方式，让我们可以创建出完全自定义的组件，像原生的 HTML 元素一样使用。
Custom Elements 包含两个重要的 API：
- customElements.define()：定义自定义元素
- extends：自定义元素继承的原生 HTML 元素
创建 Custom Elements 的步骤
1. 创建一个类
使用 ES6 class 创建一个类，该类需要继承 HTMLElement 或其子元素，如 HTMLInputElement、HTMLButtonElement 等。
class MyCustomElement extends HTMLElement {
constructor() {
super();
}
}2. 定义该类的生命周期方法
Custom Elements 有一些生命周期方法，可以让我们在元素创建、添加到页面、从页面删除等不同的生命周期中执行不同的操作。其中，最常用的是 connectedCallback() 和 disconnectedCallback()。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
-
------------------- -
---------------------------
-
---------------------- -
-----------------------
-
-3. 注册 Custom Elements
通过 customElements.define() 方法注册自定义元素，该方法接受两个参数，第一个参数是自定义元素的名称，第二个参数是刚刚创建的类名。
customElements.define('my-custom-element', MyCustomElement);4. 在 HTML 中使用 Custom Elements
在 HTML 中使用自定义元素时，我们只需要把自定义元素的名称放到标签中即可。
<my-custom-element></my-custom-element>
Custom Elements 开发经验分享
1. 封装复杂逻辑
封装复杂逻辑是 Custom Elements 开发的一个关键点。通过自定义元素，我们可以把一些复杂的逻辑封装起来，让代码更易维护、易重用。
例如，我们可以创建一个自定义表单组件，封装表单验证逻辑：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
-
---------- -
-- ------
-
------------------- -
------------------------------- ------- -- -
----------------
---
-
-
---------------------------------------- ---------------2. 可访问性
Custom Elements 的另一个重要点是可访问性。我们需要确保自定义元素可以被屏幕阅读器等辅助功能访问到，从而让页面更加包容。
要确保 Custom Elements 的可访问性，我们需要遵循一些最佳实践：
- 在元素中添加 aria-* 属性
- 为元素添加 label 元素
- 为元素添加 title 属性等
例如，我们可以在自定义表单组件中添加 label 元素：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
-
------------------- -
----- ----- - --------------------------------
--------------- - -------
----- ----- - --------------------------------
-------------------------- --------
-------------------------- ------------
------------------------
------------------------
-
-
---------------------------------------- ---------------这样，屏幕阅读器就可以读出 label 标签的内容，让页面更加容易理解。
3. 组件化开发
Custom Elements 还可以让我们更好地进行组件化开发，从而让代码更易维护、易重用。
例如，我们可以创建一个自定义按钮组件：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
-
------------------- -
--------------------------------
-
-
------------------------------------------ -----------------然后，在其他页面中使用该组件：
<my-button-element>点击我</my-button-element>
我们还可以通过 CSS 对该组件进行样式控制：
-- -------------------- ---- ------- ---------- - ----------------- -------- ------ ----- ------- ----- -------------- ---- -------- --- ----- ------- -------- - ---------------- - ----------------- -------- -
这样，我们就可以很方便地在页面中添加一个自定义按钮了。
总结
通过 Custom Elements，我们可以创建出完全自定义的组件，进一步实现 web 组件化开发。在使用 Custom Elements 进行开发时，我们需要关注封装复杂逻辑、可访问性和组件化开发等方面，以提高自定义元素的质量和可重用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64940f4948841e9894198c4a