Web Components 由自定义元素、影子 DOM 和 HTML 模板组成，1. 通过 customElements.define 定义标签；2. 利用 attachShadow 实现样式结构隔离；3. 使用 template 预定义可复用结构；4. 支持属性监听、事件派发与 slot 内容分发，实现高内聚低耦合的跨项目组件，适用于设计系统与嵌入式工具，具备原生支持与长期稳定性。
Web Components 是一套浏览器原生支持的技术，能让开发者创建可复用、封装良好且无需依赖框架的 UI 组件。它由三项核心技术组成：自定义元素（Custom Elements）、影子 DOM（Shadow DOM）和 HTML 模板（）。掌握这些技术，就能构建出真正独立、可跨项目使用的 UI 组件。
1. 使用自定义元素定义组件标签
自定义元素允许你创建新的 HTML 标签，比如 或 。通过 JavaScript 中的 customElements.define() 方法注册组件类。
组件类需继承 HTMLElement 或其子类，并在其中编写逻辑：
• 定义一个类，例如 class MyButton extends HTMLElement {}
• 在 constructor 中初始化状态或绑定事件
• 调用 customElements.define(‘my-button’, MyButton) 注册标签
注册后，就可以像普通 HTML 元素一样使用 。
2. 利用影子 DOM 实现样式与结构隔离
影子 DOM 能将组件的内部结构和样式与页面其他部分隔离开，避免样式污染和选择器冲突。
在组件构造函数中调用 this.attachShadow({ mode: ‘open’ }) 创建影子根，然后将模板内容插入其中：
• attachShadow 返回一个影子根对象
• 使用 innerHTML 或 append() 将结构添加到影子根
• 影子内部的 CSS 不会影响外部，外部样式也默认不穿透
这样即使组件内写了 button { color: red }，也不会影响页面其他按钮。
3. 使用 HTML 模板预定义结构
元素可以存放不会立即渲染的 HTML 结构，适合用于组件的默认布局。
将模板写在页面中或动态生成，然后在自定义元素中克隆使用：
• 在 template 标签中编写组件的 HTML 结构
• 通过 document.querySelector(‘template’).content.cloneNode(true) 获取副本
• 插入到影子 DOM 中
这种方式让结构更清晰，也便于维护和复用模板代码。
4. 支持属性、事件与插槽增强交互性
为了让组件更灵活，需要支持属性传值、事件通知和内容分发。
可以通过以下方式实现：
• 使用 get/setAttribute 读写 HTML 属性，在 attributeChangedCallback 中响应变化
• 定义 observedAttributes 静态属性来监听特定属性变更
• 使用 实现内容投影，让用户向组件注入自定义内容
• 通过 this.dispatchEvent(new CustomEvent(‘submit’)) 触发自定义事件
这样组件就能接收输入、反馈状态，具备良好的封装性和扩展性。
基本上就这些。Web Components 不依赖任何框架，适合构建设计系统、嵌入式小工具或跨项目共享的通用组件。虽然生态不如 React 或 Vue 丰富，但它的原生性和兼容性让它在特定场景下非常实用。只要遵循标准，组件就能长期稳定运行。
以上就是如何利用Web Components技术构建可复用的UI组件？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526173.html
微信扫一扫 
支付宝扫一扫 
