随着 Web 技术的发展，前端组件化越来越受到重视。使用组件化的方式可以提高代码的复用率、易维护性以及降低开发难度。而 Web Components 就是一种构建可重用和可扩展的 Web 应用程序的技术方案，包括 Custom Elements、Shadow DOM 和 HTML Templates。
在这篇文章中，我们将着重介绍 Custom Elements 技术，教你如何利用 Custom Elements 创建自定义组件，并在项目中应用。
Custom Elements 简介
Custom Elements 是 Web Components 标准中的一部分，它是用来定义自定义元素的 API。也就是说，我们可以通过 Custom Elements API 创建出自定义元素，并在页面中使用，这些元素可以拥有自定义的行为和样式。
Custom Elements API 为我们提供了两个主要的函数：
customElements.define(tagName, constructor, options): 用来定义一个自定义元素，tagName 参数指定元素名称，constructor 参数指定元素构造函数，options 参数是一个可选的对象，用于指定元素的行为。customElements.get(tagName): 用来获取已经定义的自定义元素。
利用 Custom Elements 创建自定义组件
接下来，我们结合代码演示如何使用 Custom Elements 创造自己的组件。
首先，创建一个新的 HTML 文件，并定义一个新的自定义元素 custom-component，代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------- ----------------
-------
------
-------------------------------------
--------
----- --------------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - ----------- ------ ----------------
-
-
----------------------------------------- -----------------
---------
-------
-------在这个代码中，我们定义了一个 CustomComponent 的类，该类继承自 HTMLElement。通过 connectedCallback() 函数，我们可以在元素被连接到页面上时设置元素的内容。在我们的例子中，我们设置了一个标题标签 h1，用于展示自定义组件的标题。
接下来，我们使用 customElements.define() 函数来定义自定义元素，将 CustomComponent 类和元素名称 custom-component 进行绑定。最后，在 HTML 页面中使用该自定义元素，即可看到自定义组件被渲染到页面上。
自定义元素的行为
除了 connectedCallback() 函数外，Custom Elements 还为我们提供了多种函数用于定义元素的行为。例如：
disconnectedCallback(): 元素从页面中删除时的回调函数。attributeChangedCallback(name, oldValue, newValue): 元素的属性变化时的回调函数。adoptedCallback(): 元素从另一个文档被移动时的回调函数。
在 customElements.define() 函数中，我们可以通过 options 参数来定义元素的行为。例如：
customElements.define('my-element', MyElement, {
observedAttributes: ['name'],
attributeChangedCallback(name, oldValue, newValue) {
console.log(`${name} changed from ${oldValue} to ${newValue}`);
}
});在这个例子中，我们定义了一个 observedAttributes 数组，用于指定我们想要监听的属性。当元素的属性发生变化时，attributeChangedCallback() 函数会被调用。
自定义元素的样式
自定义元素除了拥有自定义的行为之外，还可以拥有自定义的样式。通过将样式封装在 Shadow DOM 中，我们可以防止组件的样式被其他元素影响，提高组件的可重用性。
在 CustomComponent 类中添加以下代码，即可为自定义元素添加 Shadow DOM：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-
------------------- -
------------------------- - -
-------
-- -
------ ----
-
--------
---------- ------ ----------------
-
-在这个例子中，我们通过 attachShadow() 函数为元素添加了 Shadow DOM。通过 mode 参数，我们指定了 Shadow DOM 的打开模式为 open，这样就允许外部访问 Shadow DOM。
我们在 Shadow DOM 的内部定义了一个样式，并在 connectedCallback() 函数中将 Shadow DOM 中的内容设置为标题标签 h1。
总结
Custom Elements 是 Web Components 技术中的重要一环，能够帮助我们实现自定义元素的创建和定义。通过构建自定义组件，我们可以使得我们的代码更加易于维护和复用。
在这篇文章中，我们介绍了 Custom Elements 的基本用法，并给出了具体的例子，希望能够帮助读者更好的理解 Custom Elements 技术。如果你想深入了解 Web Components，可以参考 Shadow DOM 和 HTML Templates 的相关文章。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a5072048841e98941778f9