这是一个创建于 722 天前的主题，其中的信息可能已经有所发展或是发生改变。
我刚用 React.js + Electron 开发完一款桌面应用，突然有点想换个思路，反正移动端也会用 Web 技术栈，干脆移动端来点不一样的，反正界面也要重新写。所以就想着试试之前一直略有耳闻，但是优势是原生的 Web Components 。
我想请教一下关于性能上的速度和内存占用，以及工程上的开发复杂度，状态管理的复杂度。因为似乎热度一直不怎么样，也没找到高质量的文章和 YouTube 视频，所以来 v 站这种卧虎藏龙的地方来问问。
提问有点水，见谅。
29 条回复 2024-03-12 17:37:27 +08:00
 | 1 thinkershare 2023-10-19 14:00:47 +08:00  2 没有深度使用过，不好评价。Web Components 技术上我感觉很好，有浏览器原生的支持，但用的人应该不多。 我正在将自己的博客前端使用 Web Components 重构，剔除掉 Vue 和其它所有第三方库 JS 库，只用 TS+ES2022+WebAPIs ，看看会遇到那些坑。 本质上感觉还是在反现在的前端过度过程化和不可控现状。 |
 | 2 Leviathann 2023-10-19 14:19:13 +08:00 web component 现在是不是还只有经典的 class component + lifecycle api 而没有 function component + hooks/signal ？ |
| 3 Leviathann 2023-10-19 14:22:01 +08:00 搜了下，有个叫 Haunted 的库实现了 hooks for web component |
 | 4 AV1 2023-10-19 14:53:29 +08:00 via Android 1 单纯用 Web Components 还是挺痛苦的，市面上还没有很好的最佳实践。我看到不少 Web Components 的组件库还要借助 lit 的再做一层封装。 htps://lit.dev/ |
 | 5 Pastsong 2023-10-19 14:55:29 +08:00 via Android 1 Web component 更适合些给别人用的通用 UI 组件，不在乎用户使用的框架。不适合把整个 app 用 web component 写 |
 | 6 ChefIsAwesome 2023-10-19 15:00:40 +08:00 1 跟其它原生 api 一样，web component 是 low level api 。我们平时做项目都是用的 mvc 框架，web component 也得配这么一套东西才行。现在的 css module ，预编译，已经解决一部分最初设计 web component 时想要解决的问题了，所以用处不多。做广告这种放在别人网站的东西还是很好的。 |
 | 7 zdhxiong 2023-10-19 16:40:17 +08:00 6 刚用 Web Components 写完一个完整的组件库： https://www.mdui.org/ Web Components 性能非常棒，唯一的问题是生态较弱，导致开发体验较差，不如 Vue 、React 全家桶方便。 比较好的做法是，对于需要多项目复用的组件用 Web Components 写，应用层用 Vue 、React 等写。 |
 | 8 himself65 2023-10-19 16:46:30 +08:00 via iPhone 可以试试 lit 。 个人感觉大部分库对于 shadow dom 的支持还是很差的， |
 | 9 bgm004 2023-10-19 16:50:34 +08:00 svelte/solidjs 不比 Web Components 香多了。 |
 | 10 nomagick 2023-10-19 16:55:15 +08:00 写过 lit 搜索引擎和其他应用渲染你的页面有点障碍 写法是 OOP 的写法，大部分前端从业人员没掌握，而且很难补课，招不到，写不好 SSR 有点问题，虽然 SSR 是一种不正确的价值观，是对前端进化的抵制 |
 | 11 seahorzhang 2023-10-19 19:53:28 +08:00 vi iPhone 1 非常有名的轮播 swiper 已经开发出可用的 web 组件，可以去看看。 |
 | 12 crysislinux 2023-10-19 20:22:03 +08:00 Salesforce 那个 lwc 就是基于 web component 的，我之前写了小半年这个。感觉易用性跟三大框架差距很大。 |
 | 13 linkopeneyes 2023-10-19 20:27:37 +08:00 我在各种小项目重用过,也就 https://github.com/hellof2e/quark-design https://github.com/vaadin/web-components https://shoelace.style 这三个能用 |
 | 14 hez2010 2023-10-19 20:27:48 +08:00 1 可以试试 Lit （ https://lit.dev/） 这个框架，基于 web components ，新的 web 版微软商店（ https://apps.microsoft.com/）也在用这个框架，加载速度快而且动效也做的非常漂亮，相当于是已经有大厂替你踩过雷了。 而且还有 fluent design UX 库可以用（ https://learn.microsoft.com/en-us/fluent-ui/web-components/components/overview ）。 |
| 15 hez2010 2023-10-19 20:29:42 +08:00 1 @hez2010 链接被 v2 识别错了。这里重新贴一下： Lit： https://lit.dev MS 商店： https://apps.microsoft.com 基于 Web components 的 Fluent Design UX 库： https://learn.microsoft.com/en-us/fluent-ui/web-components/components/overview |
 | 16 putaozhenhaochi 2023-10-19 20:29:49 +08:00 via iPhone 国内各大组件库没啥动静 |
 | 17 passerby233 2023-10-19 22:14:07 +08:00 https://omijs.github.io/home/zh/ |
| 18 passerby233 2023-10-19 22:15:51 +08:00 https://github.com/Tencent/omi 小白表示第一次听说 Web Components |
 | 19 ysc3839 2023-10-19 22:22:25 +08:00 via Android 我不是专业前端开发，之前简单了解过 Web Components ，感觉主要好处是写组件库。传统的组件库/css (比如 Bootstrap) 都是要你按要求摆出一定的元素结构，其中元素还得正确设置 class 以及其他 attr 。用 Web Components 则可以在一个“元素”中封装复杂的结构。 |
 | 20 RedNax 2023-10-20 01:19:03 +08:00 我们公司的组件库用 Webcomponent ，由于项目都是 React/Angular ，所以会在 WebComponent 组件库上再包一层成为 React/Angular 组件库。 体验就 WebComponnet 本身就已经难写难用了，用在 React/Angular 里同样难用，比纯 React/Angular 的组件库差多了。 没有太大意义的技术。 |
 | 21 agdhole 2023-10-20 01:24:13 +08:00 angular material 现在正在接入的底层 material 库就是 mdc 的 https://github.com/material-components/material-web |
 | 22 laev 2023-10-20 09:26:37 +08:00 对于开发小插件，个人还是比较喜欢 svelte ，就 Web Components 当前来讲，拿来做复杂业务感觉差点意思 |
 | 23 zhbhun 2023-10-20 10:06:28 +08:00 有用 ionic 开发移动端的混合应用，ionic 组件都是 web component 实现的，支持 angular 、react 和 vue ，因为使用了 shadow dom ，很多内部样式无法定制，还原设计稿的时候很痛苦，如果不定制的话，还是可以的。 |
 | 24 pk111and222 2023-10-20 10:19:42 +08:00 via Android 大厂 B 端。已上生产。 |
 | 25 chaxus 2023-10-20 10:25:07 +08:00 |
 | 26 TunkShif 2023-10-20 22:44:40 +08:00 3 Web Components 实际上是 Custom Elements, Shadow DOM 和 Templates and Slots 这几个 API 组成的一套技术，这几个都是比较 low level 的 API, 实际上开发的时候还是需要使用 Lit 或者 Stencil 这样的框架，另外像 Vue, Svelte 和 SolidJS 也都可以直接将组件导出成 Custom Element 。 目前个人感觉 Shadow DOM 的坑还是挺多的，比如样式隔离的问题，外部的 CSS 无法作用于 Shadow DOM 内，要写出 Headless 的无样式组件比较困难，当前有 CSS ::part() 选择器的方案可以解决部分问题。还有 form 表单不会识别 Shadow DOM 内的 input 元素，似乎 ElementInternals 和 FormAssociated 这一 API 能解决。另外 Shadow DOM 的 SSR 方案可能也还得等到几家浏览器支持 Declarative Shadow DOM 了才能稳定。 目前我个人感觉 Web Components 适用的场景主要下面两个： 一是用来开发封装专门功能的复杂组件，可以很方便的集成到其它任何应用里使用，比如这个 Emoji Picker ( https://nolanlawson.github.io/emoji-picker-element/)，还有这个 Giscus 的评论组件 （ https://github.com/giscus/giscus-component ）。 另外一个就是用来实现一套完整的 Design System 的组件库，比如像 Material Design （ https://material-web.dev/），微软的 Fluent UI （ https://developer.microsoft.com/en-us/fluentui#/），不过 Fluent 2 改用 React 了。这种情况下我觉得特别适用于像 Django 或者 Ruby on Rails 这样传统的搞后端模板渲染的 Web 框架使用，替代 Bootstrap 这类的方案。 其余情况我还是建议 React, Vue 之类的吧。 另外如果感兴趣推荐参考一下 Shoelace （ https://shoelace.style/），我感觉是目前最完善的 Web Components 组件库，文档里对主题、动画、本地化定制，还有前面提到的表单的问题都有给出解决方案。 |
 | 28 chuck1in 2023-12-10 18:04:02 +08:00 这个 web component 没有数据绑定这种概念的吧？手写原生 dom 大家真的可以接受吗？东西大了写起来恐怕不是那么容易哦？ |
Select Language