跳到主要内容

Web Components

  • 用于在Web应用程序中创建可重用组件的技术标准方案
  • 为了实现组件化，可以使开发者开发、复用、扩展自定义组件，实现自定义标签，解决 Web 组件的重用和共享问题，并使 Web 生态保持持续的开放和统一

缺点​

  • 浏览器兼容问题

Web Components 的组成​

  • HTML模板（HTML Templates）
  • HTML导入（HTML Imports）
  • 自定义元素（Custom Elements）
  • Shadow DOM
    • 用于封装一个元素的DOM和样式的机制，使其在页面上的样式和结构不受外部样式的影响。这有助于避免全局样式污染和组件之间的干扰

主要作用​

  • 跨框架使用
    • 可以在各种前端框架和库中使用，而不受特定框架限制
  • 封装和重用性
    • Web Components 允许开发者创建自包含的组件，将其逻辑、样式和结构封装在一起，以便在不同项目中重复使用

场景​

  • 构建UI组件库： 开发者可以使用 Web Components 构建自己的UI组件库
  • 多项目共享组件： 开发者可以将通用组件打包成 Web Components，并在多个项目中共享使用。