深入JavaScript_Web Components-js教程-PHP中文网

深入JavaScript_Web Components

betcha

发布： 2025-11-22 21:35:15

原创

692人浏览过

Web Components 由自定义元素、影子 DOM 和 HTML 模板构成，支持创建可复用、隔离性强的独立组件，通过生命周期回调和属性监听实现响应式行为，适用于跨框架的高解耦前端开发。

深入javascript_web components

Web Components 是一套允许开发者创建可重用、独立封装的自定义 HTML 元素的技术，它不依赖任何框架，原生支持现代浏览器。在 JavaScript 中使用 Web Components，能帮助你构建高度解耦、可维护性强的前端组件体系。核心由三项技术构成：自定义元素（Custom Elements）、影子 DOM（Shadow DOM）和 HTML 模板（HTML Templates）。

自定义元素（Custom Elements）

自定义元素让你可以定义新的 HTML 标签，并赋予其行为。通过 customElements.define() 方法注册一个类继承自 HTMLElement 的构造函数。

例如，创建一个名为 <my-button> 的按钮组件：

class MyButton extends HTMLElement { connectedCallback() { this.textContent = this.getAttribute('label') || '点击我'; this.style.padding = '10px 20px'; this.style.backgroundColor = '#007bff'; this.style.color = 'white'; this.style.borderRadius = '4px'; this.style.display = 'inline-block'; this.style.cursor = 'pointer'; } } customElements.define('my-button', MyButton);

之后就可以在 HTML 中直接使用：

立即学习“Java免费学习笔记（深入）”；

<my-button label="提交"></my-button>

支持两种类型：

自治自定义元素：完全新标签，继承自 HTMLElement，如上例。
内置自定义元素：扩展已有 HTML 元素，需设置第三个参数 {extends: 'button'}，然后在 HTML 中通过 is 属性使用。

影子 DOM（Shadow DOM）

影子 DOM 提供了真正的样式和结构封装，避免全局污染。每个组件可以挂载一个独立的 DOM 子树，与主文档隔离。

在组件构造函数中调用 this.attachShadow({mode: 'open'}) 创建影子根：

class MyCard extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = ` <style> .card { border: 1px solid #ddd; padding: 16px; border-radius: 8px; background: #f9f9f9; } </style> <div class="card"> <slot></slot> </div> `; } } customElements.define('my-card', MyCard);

使用方式：

<my-card>这是一段插槽内容</my-card>

注意：影子 DOM 内的样式不会影响外部，外部样式也不会轻易穿透进来，实现真正隔离。

Insou AI

Insou AI 是一款强大的人工智能助手，旨在帮助你轻松创建引人入胜的内容和令人印象深刻的演示。

查看详情

HTML 模板（<template> 和 <slot>）

<template> 标签用于声明不可见的 DOM 模板，直到被 JavaScript 实例化。结合 <slot> 可实现内容分发，提升组件灵活性。

示例模板：

<template id="my-modal-template"> <style> .modal { display: none; ... } .modal.open { display: block; } </style> <div class="modal"> <div class="content"> <slot name="title"></slot> <slot>默认内容</slot> </div> </div> </template>

在自定义元素中克隆模板并插入影子 DOM：

const template = document.getElementById('my-modal-template'); const clone = template.content.cloneNode(true); this.shadowRoot.appendChild(clone);

多插槽机制让使用者能按名称传入不同区域的内容，提高组件复用性。

生命周期回调与响应属性变化

自定义元素提供多个生命周期钩子，便于控制组件行为：

connectedCallback：元素插入 DOM 时触发，适合绑定事件或渲染 UI。
disconnectedCallback：元素从 DOM 移除时调用，可用于清理资源。
attributeChangedCallback：监控属性变化，需配合 observedAttributes 静态属性使用。

例如监听属性更新：

static get observedAttributes() { return ['theme']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'theme') { this.shadowRoot.querySelector('.card').className = `card ${newValue}`; } }

这样当外部修改 <my-card theme="dark"> 时，组件会自动响应样式变化。

基本上就这些。Web Components 虽不如 React 或 Vue 那样有丰富生态，但它轻量、标准、跨框架兼容，适合构建设计系统、嵌入式小工具或需要长期维护的基础组件库。掌握它，能让 JavaScript 的组件化能力更进一步。

以上就是深入JavaScript_Web Components的详细内容，更多请关注php中文网其它相关文章！