Web Components 是一套浏览器原生 API，包括 Custom Elements、Shadow DOM 和 HTML Templates，可创建封装性强、可复用的自定义元素。通过定义类继承 HTMLElement 并使用 attachShadow 创建影子 DOM，结合 innerHTML 设置结构与样式，实现逻辑与视图隔离。支持通过 observedAttributes 监听属性变化，利用 slot 插槽机制增强内容灵活性，并可通过 CSS 变量暴露主题接口。需注意命名含短横线、合理设计事件通信与样式透出，适用于跨框架组件复用场景。
在现代前端开发中，构建可复用的 UI 组件是提升开发效率和维护性的关键。Web Components 提供了一套原生浏览器支持的技术，让我们无需依赖框架就能创建封装良好、可复用的自定义元素。使用 JavaScript 即可实现样式隔离、逻辑封装和标签自定义，非常适合需要跨项目或跨框架使用的场景。
什么是 Web Components？
Web Components 是一组浏览器原生 API 的统称，主要包括：
- Custom Elements：允许我们定义自己的 HTML 标签。
- Shadow DOM：提供 DOM 和样式的隔离，避免全局污染。
- HTML Templates（）：声明不会立即渲染的可复用 HTML 结构。
这些技术结合使用，能创建真正独立、可移植的组件。
创建一个简单的可复用按钮组件
下面通过一个自定义的
立即学习“Java免费学习笔记（深入）”；
class MyButton extends HTMLElement {
constructor() {
super();
// 创建 Shadow DOM
this.attachShadow({ mode: 'open' });
// 获取按钮文本，支持默认值
const label = this.getAttribute('label') || '点击我';
// 定义模板结构
this.shadowRoot.innerHTML = `
zuojiankuohaophpcnstyleyoujiankuohaophpcn
button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007bff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
zuojiankuohaophpcn/styleyoujiankuohaophpcn
zuojiankuohaophpcnbuttonyoujiankuohaophpcn${label}zuojiankuohaophpcn/buttonyoujiankuohaophpcn
`;}
// 监听属性变化
static get observedAttributes() {
return ['label', 'disabled'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'label') {
this.shadowRoot.querySelector('button').textContent = newValue;
} else if (name === 'disabled') {
const button = this.shadowRoot.querySelector('button');
button.disabled = newValue !== null;
button.style.opacity = newValue !== null ? 0.6 : 1;
}
}
// 自定义方法
click() {
this.shadowRoot.querySelector('button').click();
}
}
// 注册自定义元素
customElements.define('my-button', MyButton);
注册后即可在 HTML 中直接使用：
Adobe Flex 简介 中文WORD版
Flex是一个基于组件的开发框架，可以生成一个由Flash Player运行的富互联网应用程序。Flex将基于标准的语言和各种可扩展用户界面及数据访问组件结合起来，使得开发人员能够构建具有丰富数据演示、强大客户端逻辑和集成多媒体的应用程序。 Flex是一个建立在Flash平台上的富客户端应用开发工具包，Flex 作为富 Internet 应用（RIA）时代的新技术代表，自从 2007 年 Adobe 公司将其开源以来，Flex 就以前所未有的速度在成长。感兴趣的朋友可以过来看看
下载
提升组件灵活性：使用 template 和 slot
如果希望内容更灵活，比如支持图标或其他 HTML 元素，可以使用
this.shadowRoot.innerHTML = `
`;
然后这样使用：
✅ 提交
内容会自动插入到
最佳实践与技巧
- 命名规范：自定义元素名称必须包含短横线（如 my-button），避免与标准 HTML 标签冲突。
- 属性与事件通信：通过 attributeChangedCallback 响应属性变化，使用 this.dispatchEvent(new CustomEvent(...)) 触发自定义事件。
- 样式隔离：Shadow DOM 天然隔离样式，但注意外部无法轻易覆盖内部样式，需提前设计好 CSS 变量接口。
- CSS 变量支持主题：可在 Shadow DOM 中使用 CSS 自定义属性，便于外部定制外观：
button {
background-color: var(--my-button-bg, #007bff);
}
外部使用时：
my-button {
--my-button-bg: green;
}
基本上就这些。Web Components 虽不如 React 或 Vue 那样生态丰富，但在构建轻量级、框架无关的可复用组件时非常实用，尤其适合设计系统、微前端或嵌入式小工具场景。不复杂但容易忽略细节，掌握后能显著提升代码复用能力。
