Web Components 是一种自定义 HTML 元素的技术，已经成为前端领域中广泛使用的一种技术。Web Components 可以让我们创建符合标准的、可重用的、可组合的自定义元素。
Web Components 中的自定义元素
Web Components 包含许多单独的技术，其中之一就是 Custom Elements，用于创建自定义 HTML 元素。我们可以使用原生 JavaScript 实现我们自己的自定义元素，而不需要使用任何第三方库或框架。
自定义元素不止是普通的 HTML 元素，它们还可以有自己的行为和属性集合。当然，这些自定义元素需要经过一些特殊的定义和编码，以便能够与其他元素公用，且在用户使用时具备正常的 HTML 元素的交互体验。
自定义元素的创建
我们可以使用 Document.registerElement() 方法来自定义元素。该方法接受两个参数：
- 标签名：新元素的名称，必须使用短横线连接的自定义元素名称。
- options：包含所有自定义元素选项的对象。
下面是创建一个简单的自定义元素，并将其添加到页面中的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------- ------------
-------
------
---------------------------------
--------
----- ------------- - ------------------------------------------ -
---------- ------------------------------------
---
----- -- - --- ----------------
------------------------------
---------
-------
-------在上面的代码中，我们定义了一个自定义元素 custom-element，并将其添加到页面中。我们先使用 registerElement() 方法，传递该元素名称和一个选项对象，以创建一个自定义元素构造函数。该选项中，必须指定元素的原型以便将其继承为新的 HTMLElement 对象。
然后我们通过创建自定义元素实例并将其附加到网页的 body。最终，我们将会看到一个空的自定义元素在页面上
自定义元素生命周期
自定义元素有四个阶段的生命周期：
- 定义
- 注册
- 连接
- 使用
定义阶段是我们使用可继承对象（通常是 HTMLElement）为该元素创建原型时所起始的阶段。注册阶段是将自定义元素添加到文档中的操作。连接阶段是当自定义元素被附加到文档时发生的。最后，使用阶段是在元素被添加到 DOM 树中时发生的，此时浏览器会渲染出该元素。
我们可以为自定义元素定义生命周期回调，以在各个阶段执行操作。例如，我们可以为其定义使用connectedCallback钩子函数：
class MyElement extends HTMLElement {
connectedCallback() {
console.log('My element was connected to the page');
}
}
customElements.define('my-element', MyElement);自定义元素的样式和行为
我们可以将自定义元素的行为和样式与其他元素分离的方法。我们可以在自定义元素中定义自己的 CSS 样式和 JavaScript 行为，以便与其他元素隔离。
在下面的示例中，我们可以为 <my-element> 元素定义样式以及一个点击事件的行为：
<my-element>My custom element</my-element>
my-element {
color: blue;
cursor: pointer;
}-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------------------ -- -- -
--------------- ------- --- ----------
---
-
-
----------------------------------- -----------如上代码生成的元素是有样式且具有点击事件行为的。
自定义元素的属性
自定义元素不止是普通的 HTML 元素，它们还可以有自己的属性集合。我们可以编写封装自定义元素时，提供属性和方法操作等行为的类来管理自定义元素的行为。
在下面的示例中，我们可以创建一个名为 my-element 的自定义元素，并为其定义一个属性 message：
<my-element message="Hello, World!"></my-element>
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-------------- - -----------------------------
-
--- -------------- -
---------------------------- -------
-
--- --------- -
------ -----------------------------
-
-
----------------------------------- -----------上面的代码演示了如何使用框架的类来编写一个简单的自定义元素。我们将消息定义为一个属性，使其可以更容易地通过JavaScript、样式表和HTML访问。
我们可以使用 JavaScript 修改该元素的属性：
const ce = document.querySelector('my-element');
ce.message = 'Goodbye, World!';自定义元素的属性值也可以通过 JavaScript 或样式表进行修改，但是这取决于它们是可变的还是不可变的。
总结
在本篇文章中，我们了解了 Web Components 中的自定义元素。我们使用原生 JavaScript 创建并操作了一个自定义元素，以及它的样式、行为、生命周期和属性。了解 Web Components 可以让我们创建可重用的自定义元素，为我们的应用程序增加更多的灵活性和自由度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65afb8a3add4f0e0ff92b517