随着前端技术的不断发展，Web Components 和 Custom Elements 逐渐成为前端开发的热门话题。但是很多开发者对它们之间的区别并不清楚。本文将介绍 Custom Elements 和 Web Components 的区别，以及如何在项目中使用它们。
Custom Elements
Custom Elements 是一个 Web Components 的 API，它允许开发者自定义 HTML 标签并封装自定义元素的功能和行为。Custom Elements 构造函数使用 ES6 类的语法，继承 HTMLElement 类，并且使用 constructor() 方法来定义自定义元素的行为和属性。
自定义元素的基本结构
下面是一个使用 Custom Elements 的基本例子：
<my-element></my-element>
class MyElement extends HTMLElement {
constructor() {
super();
this.innerHTML = 'Hello, World!';
}
}
window.customElements.define('my-element', MyElement);在上面的例子中，我们创建了一个名为 MyElement 的类，该类继承 HTMLElement 类。然后我们使用 define() 方法来定义自定义元素。当我们在 HTML 中使用 <my-element> 标签时，浏览器将自动创建一个 MyElement 的新实例。
自定义元素的属性
我们可以通过定义 get 和 set 方法来设置自定义元素的属性：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ------- --------
-
--- ------ -
------ --------------------------
-
--- ----------- -
------------------------- -------
-
-
------------------------------------------ -----------我们可以通过 name 属性来设置和获取自定义元素的 name 属性：
<my-element name="John"></my-element>
console.log(document.querySelector('my-element').name); // 'John'自定义元素的生命周期方法
除了 constructor() 方法，我们还可以使用其他自定义元素生命周期方法来在元素的不同生命周期中执行操作。这些方法分别是 connectedCallback()、disconnectedCallback()、adoptedCallback() 和 attributeChangedCallback()。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-------------- - ------- --------
-
------------------- -
---------------------- -- --- ------
-
---------------------- -
------------------------- ---- --- ------
-
----------------- -
-------------------- ---- - --- -----------
-
------------------------------ ------- ------- -
---------------------- ------- ------- ---- --------- -- ------------
-
-
------------------------------------------ -----------Web Components
Web Components 是一组技术，包括 Custom Elements、Shadow DOM 和 HTML Templates。Custom Elements 用于定义元素，Shadow DOM 用于封装和隐藏元素的部分内容和样式，HTML Templates 用于动态创建可重用的元素模板。
Shadow DOM
Shadow DOM 允许开发者创建私有的 DOM 树和 CSS 样式，这些元素不会与主文档混淆。我们可以在自定义元素的构造函数中使用 attachShadow() 方法来创建 Shadow DOM。
下面是一个使用 Shadow DOM 的例子：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
- -
------ ----
-
--------
--------- ----------
--
-
-
------------------------------------------ -----------在上面的例子中，我们通过 attachShadow() 方法创建 Shadow DOM，并设置其模式为 open。我们还通过 innerHTML 属性向 Shadow DOM 中添加了一个红色的 <p> 元素。
HTML Templates
HTML Templates 允许我们在文档中预先定义包含 HTML 和 JavaScript 的模板。然后，我们可以在需要时将模板实例化为元素。我们可以在 Custom Elements 中使用 HTML Templates 来创建可重用的模板。
下面是一个使用 HTML Templates 的例子：
-- -------------------- ---- -------
----- -------- - -----------------------------------
------------------ - -
-------
- -
------ ----
-
--------
--------- ----------
--
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
------------ - ---------------------------------
-------------------------------------
-
-
------------------------------------------ -----------在上面的例子中，我们首先创建了一个 HTML 的 template 元素，然后通过 innerHTML 属性填充了这个模板。我们还创建了一个 MyElement 的类，并将模板实例化为一个元素，将其添加到了 Shadow DOM 中。
Custom Elements 和 Web Components 的区别
在上面的例子中，我们可以看出 Custom Elements 提供了自定义 HTML 标签的能力，而 Web Components 则提供了更加完整的自定义组件的开发能力。通过使用 Shadow DOM 和 HTML Templates，我们可以封装和隔离组件的样式和内容，并通过 Custom Elements 来创建可重用的组件。Custom Elements 和 Web Components 的区别可以总结如下：
- Custom Elements 允许开发者自定义 HTML 标签，一般用于元素级别的功能和行为定义。
- Web Components 是由 Custom Elements、Shadow DOM 和 HTML Templates 三个技术组成的一个完整的自定义组件规范，它使得开发者可以创建复杂的组件，并且可以隔离组件的样式和内容。
总结
本文介绍了 Custom Elements 和 Web Components 的区别，以及如何在项目中使用它们。Custom Elements 允许我们自定义 HTML 标签，并定义自定义元素的行为和属性，而 Web Components 是一组技术，包括 Custom Elements、Shadow DOM 和 HTML Templates，提供了更加完整的自定义组件的开发能力。我们可以选择适合自己项目的方式来使用它们。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455b691968c7c53b091e650