Web Component
Web Component
是什么 🖖
Web Component 是一种用于创建可复用的组件的技术，它是由 W3C 官方推出的一套标准，并在现代浏览器中得到了广泛支持。Web Component 允许开发者创建自定义 HTML 标签，拥有自己的 JavaScript 行为和样式，并且可以在应用程序中进行复用。
作为开发者，我们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的 HTML（以及相关的样式和脚本），有时您不得不写代码来呈现自定义 UI 控件，并且如果您不小心的话，多次使用它们会使您的页面变得一团糟。
哪里会用到 💡
-
组件库：在一个团队中可能会用到
Vue或React，如果有相同的设计规范，那么在团队中就需要开发两套完全相同的ui组件库来分别适配Vue或React，Web Component不依赖于特定的框架或库，可以在任何现代浏览器中使用，也可以与其他框架，如React、Angular、Vue等一起使用。这种技术栈无关性为团队提供了更大的灵活性，可以选择最适合他们的工具来开发应用程序。 -
微前端：通过将应用程序拆分为小的、自治的
Web组件，使得它们可以在任何环境中独立运行。这种方案需要现代浏览器的支持，并且可以在React、Angular、Vue等框架上使用，也可以作为一种纯JavaScript解决方案使用。由于Web Component是自治的，因此每个子应用程序可以独立地部署，并且可以在运行时动态加载和卸载。这使得它非常适合基于微前端的架构，可以实现跨多个团队和技术栈的协作。
举个例子 🌰
实现 web component 的基本方法通常如下所示：
- 创建一个类或函数来指定 web 组件的功能，如果使用类，请使用 ECMAScript 2015 的类语法 (参阅类获取更多信息)。
- 使用
CustomElementRegistry.define()方法注册您的新自定义元素，并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。 - 如果需要的话，使用
Element.attachShadow()方法将一个 shadow DOM 附加到自定义元素上。使用通常的 DOM 方法向 shadow DOM 中添加子元素、事件监听器等等。 - 如果需要的话，使用 [` 和 “ 定义一个 HTML 模板。再次使用常规 DOM 方法克隆模板并将其附加到您的 shadow DOM 中。
- 在页面任何您喜欢的位置使用自定义元素，就像使用常规 HTML 元素那样。
Web Component 和无框架/原生组件的开发方式略有不同。
对于 Web Component，我们需要使用 Custom Elements、Shadow DOM 和 HTML Templates 等技术来创建组件。下面是一个简单的 Web Component 示例，用于创建一个自定义的按钮：
<template id="custom-button">
<style>
button {
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
}
</style>
<button><slot></slot></button>
</template>
<script>
class CustomButton extends HTMLElement {
constructor() {
super();
const template = document.getElementById('custom-button').content;
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.cloneNode(true));
}
}
customElements.define('custom-button', CustomButton);
</script>
在上面的代码中，我们使用了 HTML Templates 技术来定义组件的结构和样式，使用 Custom Elements 来创建自定义元素，并使用 Shadow DOM 来封装样式和 DOM 结构。最后通过 customElements.define 方法将自定义元素注册到浏览器中。
生命周期
connectedCallback：当自定义元素第一次被连接到文档 DOM 时被调用。disconnectedCallback：当自定义元素与文档 DOM 断开连接时被调用。adoptedCallback：当自定义元素被移动到新文档时被调用。attributeChangedCallback：当自定义元素的一个属性被增加、移除或更改时被调用。