Web Components 是基于浏览器原生技术创建可重用组件的机制，由 Custom Elements、Shadow DOM 和 HTML Templates 三个规范组成。可以将 Web Components 想象成为一个自定义的 HTML 标签。
在本文中，我们将深入了解 Web Components 的实现方法和原理，以及如何使用 JavaScript 创建自定义 Web Components。
Custom Elements
Custom Elements API 用于创建自定义 HTML 元素。它允许开发者创建新的 HTML 标签，这些标签的行为与原生标签相似。
创建 Custom Elements
创建 Custom Elements 的方法有两种，一种是继承 HTMLElement 类，另一种是使用 customElements.define 方法。
继承 HTMLElement 类
class MyComponent extends HTMLElement {
constructor() {
super();
this.innerHTML = '<p>Hello World</p>';
}
}
customElements.define('my-component', MyComponent);使用 customElements.define 方法
-- -------------------- ---- -------
----- ----------- - -
-------- ------
------- -----
------------- -
----- ---------- - ------------------------ ---------
-------------------- - --------- -----------
-
--
------------------------------------- -------------生命周期
Custom Elements 定义了一组生命周期回调函数，用于在自定义元素的不同生命周期阶段执行自定义代码。有以下四个生命周期方法：
connectedCallback: 元素被插入到文档中时调用。disconnectedCallback: 元素从文档中删除时调用。adoptedCallback: 元素被移动到新的文档时调用。attributeChangedCallback: 元素的属性值被添加、删除、更改时调用。
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------- -
--------
------------------------ ---------
-
------------------- -
------------------------- - --------- -----------
-
---------------------- -
-------------------- ------- ---- -----------
-
----------------- -
-------------------- ----- -- --- -----------
-
------------------------------ --------- --------- -
---------------------- ------- ------- ---- ----------- -- --------------
-
-
------------------------------------- -------------Shadow DOM
Shadow DOM 是一种用于封装 HTML 标签样式、行为和 DOM 的方式。它允许开发者创造更为复杂的 Web Components，并且不会与页面中的其他代码产生冲突。
创建 Shadow DOM
使用 attachShadow 方法可以在某个 HTML 元素上创建一个 Shadow DOM。
const shadowRoot = element.attachShadow({mode: 'open'});使用 Shadow DOM
可以将 HTML 和 CSS 插入 Shadow DOM 中，这些内容将不会影响外部文档的样式和行为。
-- -------------------- ---- -------
----- -------- - -----------------------------------
------------------ - --------
- -
------ ----
-
--------
-------- ------------
----- ---------- - --------------------------- ---------
---------------------------------------------------------HTML Templates
HTML Templates 定义了一种机制，用于将一段 HTML 代码保存为模板，以备将来插入到 Web 页面中。
创建 HTML Templates
使用 template 标签来定义 HTML 模板并存储在文档中。
<template id="my-template"> <h1>Hello World</h1> </template>
使用 HTML Templates
使用 content 属性可以获取 HTML 模板的内容，并将其插入到 Shadow DOM 中。
const template = document.getElementById('my-template');
const shadowRoot = element.attachShadow({mode: 'open'});
shadowRoot.appendChild(template.content.cloneNode(true));创建 Web Components
Web Components 由三个规范（Custom Elements、Shadow DOM 和 HTML Templates）组成，开发者可以根据自己的需求使用其中任意一种或多种规范来构建自定义的 Web Components。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
------------- --- ------------------
-------
------
-----------------------------
--------- -----------------
-------
- -
------ ----
-
--------
-------- ----- ---- -------------
-----------
--------
-- -- ------ -------
----- ----------- ------- ----------- -
------------- -
--------
----- -------- - ---------------------------------------
----- ---------- - ------------------------ ---------
---------------------------------------------------------
-
-
------------------------------------- -------------
---------
-------
-------结论
Web Components 开发过程中，我们可以使用 Custom Elements、Shadow DOM 和 HTML Templates 这三个规范来创建自定义的、可重用组件。在实际开发中，Web Components 可以提高代码复用性，使代码更加可维护和可扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fcd879447136260173c6bd