JavaScript Web Components 教程：构建可复用自定义组件
引言
Web Components 是一套由浏览器原生支持的 Web API，它允许开发者创建可重用、封装良好的定制 HTML 元素，从而实现组件化的前端开发模式。通过 Web Components ，我们可以定义新的、功能丰富的用户界面元素，并且它们可以像标准HTML元素一样在任何地方被轻易地使用和组合。本教程将带你入门 JavaScript Web Components 的世界，了解其核心概念并实战创建一个基本的自定义组件。
Web Components 组件体系
Web Components 主要由以下四个核心技术构成：
1. Custom Elements（自定义元素）：
- 允许开发者扩展HTML元素集合，通过定义新的标签来创建自定义组件。
class MyCustomElement extends HTMLElement {
constructor() {
super();
// 构造逻辑...
}
connectedCallback() {
// 当 custom element首次被插入文档DOM时，被调用
}
disconnectedCallback() {
// 当 custom element从文档DOM中删除时，被调用
}
adoptedCallback() {
// 当 custom element被移动到新的文档时，被调用
}
attributeChangedCallback() {
// 当 custom element增加、删除、修改自身属性时，被调用
}
}
customElements.define('my-component', MyCustomElement);
2. Shadow DOM（影子DOM）：
- 提供了封装样式和结构的能力，使组件内部的CSS样式不会影响到外部环境，反之亦然。
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<style>
/* 组件内部样式 */
</style>
<div class="content">...</div>
`;
3. HTML Templates（HTML模板）：
- 使用
<template>和<slot>元素定义组件的内容和可替换区域。
<template id="my-template">
<style>
/* 组件样式 */
</style>
<div class="container">
<slot></slot> <!-- 这里可以插入其他元素 -->
</div>
</template>
4. HTML Imports（已废弃，现推荐使用模块系统）：
- 原本用于导入HTML文件作为组件的载体，但在现代浏览器中，我们通常使用ES6模块或其他模块加载机制来引入组件脚本。
创建一个简单的 Web Component
下面，我们将一步步创建一个名为my-counter的基本计数器组件：
<!-- my-counter.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Counter Web Component</title>
<script type="module">
class MyCounter extends HTMLElement {
constructor() {
super();
this._count = 0;
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(this.createTemplate());
this.incrementBtn = this.shadowRoot.querySelector('.increment');
this.decrementBtn = this.shadowRoot.querySelector('.decrement');
this.counterDisplay = this.shadowRoot.querySelector('#counter');
}
createTemplate() {
const template = document.createElement('template');
template.innerHTML = `
<style>
.counter-container {
display: flex;
align-items: center;
}
button {
margin: 0 10px;
}
</style>
<div class="counter-container">
<button class="increment">+</button>
<span id="counter">0</span>
<button class="decrement">-</button>
</div>
`;
return template.content.cloneNode(true);
}
connectedCallback() {
this.incrementBtn.addEventListener('click', () => this.increment());
this.decrementBtn.addEventListener('click', () => this.decrement());
}
increment() {
this._count++;
this.updateCount();
}
decrement() {
if (this._count > 0) {
this._count--;
this.updateCount();
}
}
updateCount() {
this.counterDisplay.textContent = this._count;
}
}
customElements.define('my-counter', MyCounter);
</script>
</head>
<body>
<my-counter></my-counter>
</body>
</html>
在这个例子中，我们定义了一个MyCounter类，它继承自HTMLElement并实现了构造函数、生命周期钩子以及一些方法来控制计数器的行为。组件内部使用了 Shadow DOM，并且包含两个按钮和一个显示计数值的<span>元素。
使用Web Components
现在你已经创建了一个 Web Component ，你可以像普通 HTML 元素那样在页面中使用它：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using My Counter Component</title>
<link rel="import" href="my-counter.html"> <!-- 如果不使用模块，则通过链接引入 -->
</head>
<body>
<h1>Counters:</h1>
<my-counter></my-counter>
<my-counter></my-counter>
</body>
</html>
写在最后
Web Components 为 Web 开发带来了一种强大的组件化方式，让开发者能够更好地组织代码，提升代码复用性和维护性。通过深入学习和实践，你会发现 Web Components 在现代前端项目中的巨大价值。
喜欢的话帮忙点个赞 + 关注吧，将持续更新 JavaScript 相关的文章，还可以关注我的公众号 梁三石FE ，感谢您的关注~
原文地址：https://blog.csdn.net/lg15839654949/article/details/137958970
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！