什么是WebComponets组件

Web Components 是一组用于创建可重用、独立、自定义 HTML 元素的技术标准。它由四个核心技术组成，每个技术都有不同的用途，但一起可以实现自定义组件的创建和使用。这四个核心技术是：

  1. Custom Elements（自定义元素）： 允许开发者创建自己的 HTML 元素，并在页面中使用类似于 <my-element></my-element> 的标签。
  2. Shadow DOM（影子 DOM）： 提供了一种封装 HTML 元素的方式，使其不受外部样式和 JavaScript 影响。这使得您可以创建隔离的组件，确保其内部样式和功能不会影响到全局,类似iframe,img,video。
  3. HTML Templates（HTML 模板）： 允许开发者定义一个模板，包含要在未来克隆到 DOM 中的内容。这对于在自定义元素中创建可复用的结构非常有用。
  4. HTML Imports（HTML 导入）： (已废弃)这是一个过时的规范，允许从其他 HTML 文件中导入模板和样式。由于它过于复杂，现代的模块化和构建工具提供了更好的方式来管理组件的依赖。(现在大家积极想办法实现,或者转html in js)

以上是web component 的定义.简而言之,就是不依赖于第三方的插件或转译,在浏览器上就能原生支持的组件,不依赖webpack. 类似vue和react的组件.

这是未来浏览器趋势. vue或react只是一个时代的过度. 类似jquery与在浏览器中原生支持一样.

Web Components 的优点包括：

1. 封装和复用性： 您可以将组件的样式、结构和行为封装在一个独立的自定义元素中，使其成为可复用的组件。

2. 隔离性： 使用 Shadow DOM，每个自定义元素都可以有其自己的作用域，不会受到外部样式和 JavaScript 的干扰。

3. 标准化： Web Components 是一组标准，得到了浏览器厂商的支持，因此它们在大多数现代浏览器中都可以使用。

4. 跨框架支持： Web Components 不依赖于特定的前端框架或库，因此可以在不同框架之间共享和使用,可以在vue或react中直接使用。

5. 提高开发效率： 通过将功能和样式封装到自定义元素中，开发者可以更快速地创建和使用组件，提高开发效率。

6. 开放共享: 一些优秀的开放的web组件,可以在互联网上直接分享,大家直接可以便捷的获取. 类似cdn一样分发. 用户可以缓存在浏览器,提高加载速度.

然而，Web Components 也有一些缺点：

  1. 浏览器支持： 虽然大多数现代浏览器都支持 Web Components，但在一些旧版本浏览器中可能不完全支持。
  2. 依赖JS: 不是普通的html组件,必须依赖JS才能运行,渲染在js执行之后.
  3. 复杂性： 使用 Web Components 可能需要一些学习和适应，特别是对于那些不熟悉 Shadow DOM 和自定义元素的开发者来说。
  4. 集成问题： 由于 Web Components 是一种独立的技术，与现有的前端框架可能需要额外的集成工作。
  5. 不够完善: Web components Api现在还不够完善, 对于一些复杂的需求还不能完成.
  6. SEO可访问性: 使用 Shadow DOM 对SEO不够友好,对于搜索引擎和视障人员来说,内容是封闭的,用户不能识别出内容. 不过可以通过slot或alt 增加可读性.
  7. 延迟加载: 由于Web components 是基于js,在浏览器不支持或禁用JS的场景,组件是无法渲染出来. JS总是在html之后渲染,会使用页面抖动或白屏.
  8. 网络资源加载限制: web组件,内容依赖于web网络,经常使用js module方式加载,js module 有跨域问题. 不支持file协议. 浏览器有同源请求上限. 可以通过服务器合并资源. http/2,本地缓存等加速.

**

综合考虑，Web Components 提供了一种强大的方式来创建可重用的自定义元素，但在选择是否使用它时，需要权衡其优点和缺点，并考虑您项目的特定需求和目标浏览器的兼容性。在前端组件大趋势下,web组件渐渐成熟已经达到可用的状态了. 下面我们开始学习web Components的基础知识.

参考: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components

如何使用 Web 组件?

核心只需要两步,就可以创建一个通用的按扭组件:

  1. 自定义一个组件

    class MyButton extends HTMLElement {...}

  2. 注册html标签

    customElements.define('my-button', MyButton);
  3. 可以像普通html标签一样使用.

示例: 自定义按扭组件.

<!-- 通过html直接生成 -->
<my-button>点一下</my-button>
<script>
// 1. 创建MyButton自定义元素  
class MyButton extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: 'open'});
        this.shadowRoot.innerHTML = `<button><slot>Button</slot></button>`;
    }
}
 // 2. 注册my-button标签,关联到MyButton
customElements.define('my-button', MyButton);
</script>
<script>
    // 通过JS创建元素
    const btn=document.createElement('my-button');
    btn.textContent="我的按扭"
      btn.addEventListener("click",()=>console.log("点击了"))
    document.body.appendChild(btn);
</script>

在线试一试

是不是很简单,很方便. 一处定义到处使用,无论在什么框架下都能使用.可以看出来webcomponent不是真正的html组件,属性JS组件,依赖JS运行时,在JS加载后才渲染组件. 与img,iframe这种组件还是有点区别.跟vue,react组件类似.

在其他框架中如何使用呢?

在vue中使用:

在vue中直接与普通html标签一样使用

在react中使用:

浏览器支持

大部分现代浏览器都兼容常用的Api

总结

现在前端框架日新月异. 无论使用vue还是react,用TS 最终都转成js 运行. react,vue为了方便工程化,复杂的项目管理.

而在UI组件都趋向跨端,去框架化. Web Component 是未来组件化的方向,不是代替vue和react,web component的很多更新也来自于现在的开发框架. 在此基础上更新 迭代发展. 追求轻便,兼容,高性能,安全等.

我们下面就开始,学习web component 组件.

专题大纲

  1. Web Component #1 - 自定义组件简介
  2. Web Component #2 - 自定义元素
  3. Web Component #3 - Shadow DOM（影子 DOM)
  4. Web Component #4 - template模板和Slot插槽
  5. Web Component #5 - 样式
  6. Web Component #6 - 生命周期
  7. Web Component #7 - 属性getter/setter
  8. Web Component #8 - 自定义事件
  9. Web Component #9 - 组件module封装
  10. Web Component #10 - Form表单组件
  11. Web Component #11 - Seo优化
  12. Web Component #12 - 优秀组件库推荐

原作者:阿金
本文地址：https://hi-arkin.com/archives/web-components-1.html

标签: web components

（本篇完）

评论