Web Components 是一种新兴的前端技术，允许开发者创建可重用的自定义HTML标签，同时提供了封装和隔离性等好处。本文将为您详细介绍Web Components的概念和使用方法，以及一些实用的例子。
Web Components 是什么？
Web Components 是由W3C提出的一种浏览器标准，它包括四个不同的技术组成部分：Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports。
- Custom Elements 允许开发者创建自定义HTML标签，这些标签的行为类似于原生HTML标签。
- Shadow DOM 允许开发者创建一种独立的DOM子树，可以隐藏组件的内部实现细节，同时提供了封装和隔离性等好处。
- HTML Templates 允许开发者在文档中定义未使用的HTML片段，这些片段可以在后续使用时克隆。
- HTML Imports 允许开发者引入和重用HTML模块。
Web Components 技术有很多优点，其中最重要的是：
- 可重用性：Web Components 可以帮助大家将代码封装成自定义HTML标签，便于重用和维护；
- 独立性：组件之间的代码是独立的，互不干扰；
- 灵活性：Web Components 给开发人员提供了比原生HTML标签更灵活的选项，以实现他们所需的规则、事件、状态等。
如何使用Web Components
Web Components 分为四个组成部分，我们将一步步介绍如何创建一个简单的Web Component。
创建一个自定义元素(componet)
Custom Elements 是 Web Components 的基本构件。我们先来创建一个名为“my-component”的组件：
-- -------------------- ---- -------
--------- -----
------
------
--------- -----------------
------- -------------------------------
-------
------
-----------------------------
-------
-------首先，引入我们自己创建的js脚本"my-component.js"来定义我们的组件。如下示例展示一个最基本的自定义元素。
class MyComponent extends HTMLElement {
constructor() {
super();
this.innerHTML = 'Hello World';
}
}
customElements.define('my-component', MyComponent);在“constructor ()”函数中，我们使用“super ()”调用父类构造函数，这是必需的，因为我们的组件扩展自“HTMLElement”。我们还将“innerHTML”设置为“Hello World”，这将作为我们自定义元素的默认内容。
最后一行代码用“customElements.define”进行定义，它的第一个参数是组件名称，第二个参数则是我们刚刚定义的类。
现在，如此定义的自定义元素可以被当成“普通”HTML元素一样使用。
添加样式Shadow DOM
接下来，我们要将我们的 Web Component 分离和封装，使用 Shadow DOM 将样式和DOM实现细节隔离开来。
首先，定义一个 Shadow DOM：
class MyComponent extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'}); // 创建Shadow DOM
shadow.innerHTML = '<p>Hello World</p>'; // 定义Shadow DOM内容
}
}
customElements.define('my-component', MyComponent);在“constructor ()”函数中，我们首先调用“attachShadow ({mode：'open'}）”创建一个新的Shadow DOM。这里的参数“{mode：'open'}”告诉浏览器将Shadow DOM暴露给JavaScript，这样开发者就能直接操作 Shadow DOM 内容。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ----------- -- -------- ---
----- ---- - ------------------------------ -- -------------------
-------------- - --------- ----------- -- -------- -----
------------------------- -- --- ------ --- -
-
-
------------------------------------- -------------当然，如果您不想将 Shadow DOM 暴露给 JavaScript，您可以使用“{mode：'closed'}”模式。
使用模板HTML Templates
HTML Templates 是另一种可以用来创建 Web Components 的 Web API。它允许您在文档中定义未使用的 HTML 片段，这些片段可以在后续使用中克隆。
-- -------------------- ---- -------
--------- ---------------------------
-------
- -
------ ----
-
--------
-----
-------- ---------
------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- -------- - -------------------------------------------------
----- -------- - ---------------------------------
-----------------------------
-
-
------------------------------------- -------------
---------我们将组件的内容和样式放在了一个“template”标签中。在脚本中，我们查询了ID为“my-component-template”的元素，然后将其克隆到shadow dom中。
使用样式
您可以通过给组件添加CSS属性或类来自定义样式。我们还可以使用CSS自定义属性来管理组件样式。
-- -------------------- ---- -------
--------- ---------------------------
-------
----- -
-------- ------
-------- -----
----------------- -----------------------------
------ -------------------------------
-------------- ----
-
--------
-----
-------- ---------
------
-----------
--------
----- ----------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- -------- - -------------------------------------------------
----- -------- - ---------------------------------
-----------------------------
-
------ --- -------------------- -
------ ------------ --------------
-
------------------------------ ------- ------- -
------------------------------------------------ --------
-
-
------------------------------------- -------------
---------在CSS样式中，我们使用“：host”选择器选择自定义元素根元素，随后指定背景颜色，文本颜色等。
请注意：我们在前缀中添加了“my-component”前缀，以避免与全局变量冲突。
在 MyComponent 类中，我们现在在“observedAttributes”中设定了一个属性列表，就是我们要使用的变量名。我们还实现了“attributeChangedCallback”函数，用于在属性改变时更新所有样式。由于我们使用了 CSS 变量，您可以对应多个属性进行更改。
引用 HTML Imports
HTML Imports 是一个 Web Component 可重用性的重要构件。您可以引用其他Web组件，以实现组件的最佳实践。
<link rel="import" href="my-component.html" /> <my-component></my-component>
在“my-component.html”中，定义自己的 Web Component。
总结
Web Components 是一种有效的 Web 技术，允许开发者创建可重用、易维护、高性能的自定义 HTML 标签。 在这篇文章中，我们介绍了 Web Components 的四个部分：Custom Elements、Shadow DOM、HTML Templates 和 HTML Imports，以及如何创建一个简单的 Web Component，并添加样式和引用其他组件。
您现在已经了解了 Web Components，您应该可以更容易地创建自定义HTML标记，这些标记可以重复使用，同时提高您的代码质量和性能。如果您需要深入了解Web Components，可以参考 MDN 等资源。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b5d52968c7c53b0db4d55