Web 组件是一种可重用的代码块，能够在 Web 页面中多次使用。Custom Elements 是 Web Components 规范的一部分，它允许开发者创建自定义 HTML 元素。在本文中，我们将学习如何利用 Custom Elements 构建可重用的 Web 组件。
什么是 Custom Elements
Custom Elements 是 Web Components 规范的一部分，它允许开发者创建自定义 HTML 元素。Custom Elements 具有以下特点：
- 它们可以像原生 HTML 元素一样被创建、操作和扩展。
- 它们可以被多次使用，因此它们是可重用的。
- 它们可以在 Web 页面中以任何方式使用，包括在其他框架和库中使用。
如何创建 Custom Elements
创建 Custom Elements 的第一步是使用 customElements.define() 方法定义一个新的元素。此方法需要两个参数：元素名称和元素类。例如，下面的代码定义了一个名为 hello-world 的新元素：
class HelloWorld extends HTMLElement {
constructor() {
super();
this.textContent = 'Hello, World!';
}
}
customElements.define('hello-world', HelloWorld);在上面的代码中，我们创建了一个继承自 HTMLElement 的新类 HelloWorld。在构造函数中，我们设置了元素的文本内容为 'Hello, World!'。最后，我们使用 customElements.define() 方法将 HelloWorld 类与 hello-world 元素名称关联起来。
现在，我们可以在 HTML 中使用 hello-world 元素：
<hello-world></hello-world>
当页面加载时，浏览器将自动创建一个 hello-world 元素，并将其文本内容设置为 'Hello, World!'。
如何扩展 Custom Elements
Custom Elements 允许我们扩展现有的元素。例如，我们可以创建一个继承自 button 元素的新元素，该元素具有自定义的样式和行为：
-- -------------------- ---- -------
----- ----------- ------- ----------------- -
------------- -
--------
-------------------------- - -------
---------------- - --------
-
-
------------------------------------- ------------ - -------- -------- ---在上面的代码中，我们创建了一个继承自 HTMLButtonElement 的新类 FancyButton。在构造函数中，我们设置了元素的背景颜色为蓝色，文本颜色为白色。最后，我们使用 customElements.define() 方法将 FancyButton 类与 button 元素名称关联起来，并使用 { extends: 'button' } 参数声明它是一个扩展的 button 元素。
现在，我们可以在 HTML 中使用 fancy-button 元素：
<button is="fancy-button">Click me!</button>
当页面加载时，浏览器将自动创建一个 button 元素，并将其样式设置为蓝色背景和白色文本。
如何使用 Custom Elements 构建可重用的 Web 组件
现在，我们已经学习了如何创建和扩展 Custom Elements。接下来，我们将演示如何使用 Custom Elements 构建可重用的 Web 组件。我们将创建一个名为 color-picker 的新元素，该元素允许用户选择颜色并在页面上显示它。
首先，我们需要创建一个 HTML 模板，该模板将包含用于选择颜色的元素。下面是一个简单的 HTML 模板：
-- -------------------- ---- -------
----------
-------
------------- -
-------- -----
---------- -----
---- -----
-
------ -
------ -----
------- -----
-------------- ----
------- --------
-
--------
---- ---------------------
---- ------------- ------------------------ ------------
---- ------------- ------------------------ ---------------
---- ------------- ------------------------ ---------------
---- ------------- ------------------------ --------------
---- ------------- ------------------------ -------------
---- ------------- ------------------------ ---------------
---- ------------- ------------------------ ---------------
------
-----------在上面的代码中，我们创建了一个名为 color-picker 的 HTML 模板。该模板包含一些带有不同背景颜色的 div 元素，这些元素将用于选择颜色。
接下来，我们需要创建一个自定义元素类，该类将使用上面的 HTML 模板来创建元素。下面是一个简单的自定义元素类：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------
----- ----- - ---------------------------------
------------------- ----- ------ ---
-----------------------------------
----------------------------------------- -----------------------------
-
------------------ -
----- ----- - -----------------------------------
----- -------- - --- ---------------------------- - ------- - ----- - ---
-----------------------------
-
-
------------------------------------- -------------在上面的代码中，我们创建了一个名为 ColorPicker 的自定义元素类。在构造函数中，我们使用 document.querySelector() 方法选择 HTML 模板，并使用 content.cloneNode() 方法将其克隆到新元素中。接下来，我们使用 attachShadow() 方法创建一个 Shadow DOM，并使用 appendChild() 方法将克隆的模板添加到 Shadow DOM 中。最后，我们使用 addEventListener() 方法监听 Shadow DOM 中的 click 事件，并调用 handleClick() 方法处理它。
在 handleClick() 方法中，我们获取用户选择的颜色，并使用 CustomEvent 对象创建一个名为 colorSelected 的新事件。该事件包含一个 detail 属性，该属性包含用户选择的颜色。最后，我们使用 dispatchEvent() 方法将事件发送到自定义元素的父元素。
现在，我们可以在 HTML 中使用 color-picker 元素：
<color-picker></color-picker>
当用户选择颜色时，color-picker 元素将触发一个名为 colorSelected 的事件。我们可以使用 addEventListener() 方法监听该事件，并在页面上显示用户选择的颜色。下面是一个简单的示例代码：
const colorPicker = document.querySelector('color-picker');
colorPicker.addEventListener('colorSelected', event => {
const color = event.detail.color;
const div = document.createElement('div');
div.style.backgroundColor = color;
document.body.appendChild(div);
});在上面的代码中，我们选择 color-picker 元素，并使用 addEventListener() 方法监听 colorSelected 事件。在事件处理程序中，我们获取用户选择的颜色，并创建一个新的 div 元素。最后，我们将该元素添加到页面的主体中，并将其背景颜色设置为用户选择的颜色。
总结
在本文中，我们学习了如何利用 Custom Elements 构建可重用的 Web 组件。我们了解了 Custom Elements 的基本概念，学习了如何创建和扩展 Custom Elements，并演示了如何使用 Custom Elements 构建一个名为 color-picker 的可重用组件。希望这篇文章对你有所帮助，让你能够更好地利用 Custom Elements 构建可重用的 Web 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e2c1531886fbafa4f5b25f