Custom Elements 是 Web Components 规范的一部分，它允许开发者自定义 HTML 元素，让开发者的应用程序有更好的可读性和可维护性。在 Custom Elements 中，我们可以创建自定义 HTML 元素，并将其添加到 DOM 中，同时可以添加自定义的行为和样式。
Custom Elements 的基本概念
Custom Elements 的核心是自定义的 HTML 元素，这些元素可以有自定义的行为和样式。一个 Custom Element 由以下两部分组成：
元素定义（Element Definition）
通过定义一个类来创建自定义元素，这个类必须继承自 HTMLElement。我们需要在类外部调用 customElements.define() 方法将自定义元素与类关联起来。
以下是一个简单的 Custom Element 示例：
<my-element></my-element>
class MyElement extends HTMLElement {
constructor() {
super();
}
}
customElements.define('my-element', MyElement);在定义好自定义元素后，我们就可以通过使用 HTML 标签的形式在页面中使用这个元素了。但是现在它是个空壳元素，所以我们需要添加一些配置和行为。
生命钩子（Lifecycle Hook）
Custom Element 具有多个生命周期钩子，这些生命周期钩子允许开发人员在 Custom Element 的实例化、连接到 DOM 和从 DOM 中删除等不同时期执行代码。
- constructor()：构造函数，在 Custom Element 实例化时调用。
- connectedCallback()：当 Custom Element 被插入到 DOM 时调用。
- disconnectedCallback()：当 Custom Element 从 DOM 中删除时调用。
- attributeChangedCallback()：当 Custom Element 的属性值发生变化时调用。
下面是一个示例，其中我们在 constructor 和 connectedCallback 钩子内执行一些代码：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- - ------ ------- --------
------------------------------ -------------
-
------------------- -
-- - ------ ------- --- --- -------
-------------- - ------- ------------------------------------
-
-
----------------------------------- -----------Custom Elements 的进阶使用
Shadow DOM
Custom Element 通常会使用 Shadow DOM 将自定义 HTML、CSS 和 JS 捆绑在一起。Shadow DOM 可以用作 Custom Element 的隔离环境，这样 Custom Element 就可以拥有它们自己的 DOM 和样式，而不会被外部 CSS 影响。
以下是一个 Custom Element 使用 Shadow DOM 的示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -- ------ ---
------------------- ----- ------ ---
-- - ------ --- --- ---- --
------------------------- - -
-------
----- -
-------- ------
------- --- ----- ------
-------- -----
-
--------
-------------
--
-
-
----------------------------------- -----------在这个示例中，我们创建了一个自定义元素，使用 attachShadow() 方法创建了一个 Shadow DOM。我们在 Shadow DOM 的样式中添加了 display: block，将自定义元素设定为块级元素，并添加了一个像素宽的黑色边框和 10 像素的内边距。在 Shadow DOM 中使用了 <slot> 元素，它允许页面使用 <my-element> 元素时插入自定义的 HTML 内容。
自定义元素属性
Custom Element 允许开发人员创建自定义属性，让 Custom Element 更加灵活。可以通过 observedAttributes() 这个静态方法来监听 Custom Element 的属性变化。
-- -------------------- ---- -------
-- ------
------ --- -------------------- -
------ ---------------
-
-- ------------
---------------------------------- --------- --------- -
-- --------- --- ------------- -
-------------- - ---------
-
-自定义事件
Custom Element 还可以创建自定义事件，这样在 Custom Element 中就可以发出自定义事件并捕获它们。
-- -------------------- ---- ------- -- ---------- ----- ----- - --- ----------------------- - -------- ----- --------- ---- --- -- ---------- -------------------------- -- ---------- --------------------------------- - -- - ---------------------- ---
其他的进阶使用
- 通过实现 HTMLElement 接口，进行一些关于自定义 Element 原型的修改；
- 可以加上模板元素，方便使用者的操作；
- 使用 h5 模板引擎，进行开发，更加高效。
Custom Elements 的兼容性问题
Custom Elements 规范仍然处于实验阶段，目前仅在部分浏览器中实现。而且在不同浏览器之间实现的方式也有所不同。一些浏览器不支持所有的 Custom Elements 功能，例如 Safari 仅支持部分功能，而其他浏览器支持完整的功能。
为了解决这些问题，我们可以使用 Polyfill 库，比如 Web Components Polyfill。这个库提供了 Custom Elements 规范的一个 JavaScript 实现，可以在老版本的浏览器中使用 Custom Elements。
总结
Custom Elements 是 Web Components 规范的一部分，允许我们自定义 HTML 元素。它具有许多有用的功能，如生命周期钩子、Shadow DOM、自定义属性、自定义事件等等。通过使用 Custom Elements，开发人员可以创建自己的 HTML 元素，并使自己的应用程序更具可读性和可维护性。虽然 Custom Elements 规范仍在实验阶段，但是我们可以使用 Polyfill 来兼容现代浏览器，从而让这项技术受益更多的用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64643836968c7c53b0519c21