Web Components 通过自定义元素、影子 DOM 和 HTML 模板实现可复用、高内聚的组件：1. 使用 customElements.define() 定义标签如 ；2. 影子 DOM 隔离样式与结构，避免污染；3. 预定义复杂结构提升性能；4. observedAttributes 监听属性变化实现响应式更新。
Web Components 是一套浏览器原生支持的技术，能让开发者创建可复用、封装良好且不依赖框架的自定义 HTML 元素。在 JavaScript 中，利用 Web Components 构建可复用组件主要依靠三项核心技术：自定义元素（Custom Elements）、影子 DOM（Shadow DOM）和 HTML 模板（）。它们共同实现高内聚、低耦合的组件设计。
使用自定义元素定义组件标签
通过 customElements.define() 方法可以注册一个自定义 HTML 标签，让开发者像使用原生标签一样使用自己的组件。
例如，定义一个名为
之后就可以在 HTML 中直接使用：
立即学习“Java免费学习笔记（深入）”；
利用影子 DOM 实现样式与结构隔离
影子 DOM 能将组件的内部结构和样式与页面其他部分隔离开，避免样式污染和选择器冲突。
在构造函数中挂载影子根：
constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = ` `; }这样组件内的样式不会影响外部，外部样式也不会穿透进来。
A+是一个完全响应式，基于Bootstrap3.3.7最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对
结合模板标签预定义结构
对于较复杂的组件，可以在 HTML 中使用 标签预先定义结构，运行时克隆使用，提升性能和可维护性。
示例：
在类中引用模板：
connectedCallback() { const template = document.getElementById('my-card-template'); const content = template.content.cloneNode(true); this.attachShadow({ mode: 'open' }).appendChild(content); }支持属性监听与数据响应
通过静态 getter observedAttributes 可监听属性变化，实现响应式更新。
static get observedAttributes() { return ['label', 'disabled']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'disabled') { this.shadowRoot.querySelector('button').disabled = newValue !== null; } }这样当外部修改属性时，组件能自动调整状态。
基本上就这些。Web Components 不依赖任何框架，适合构建跨项目、跨团队使用的通用组件库，比如设计系统中的按钮、弹窗、输入框等。虽然原生写法稍显繁琐，但可配合工具或轻量封装提升开发效率。
