Web Components 2023 年 10 月份了，现在怎么样了

[ChrisFreeMan]

我刚用 React.js + Electron 开发完一款桌面应用，突然有点想换个思路，反正移动端也会用 Web 技术栈，干脆移动端来点不一样的，反正界面也要重新写。所以就想着试试之前一直略有耳闻，但是优势是原生的 Web Components 。

我想请教一下关于性能上的速度和内存占用，以及工程上的开发复杂度，状态管理的复杂度。因为似乎热度一直不怎么样，也没找到高质量的文章和 YouTube 视频，所以来 v 站这种卧虎藏龙的地方来问问。

提问有点水，见谅。

[thinkershare]

没有深度使用过，不好评价。Web Components 技术上我感觉很好，有浏览器原生的支持，但用的人应该不多。
我正在将自己的博客前端使用 Web Components 重构，剔除掉 Vue 和其它所有第三方库 JS 库，只用 TS+ES2022+WebAPIs ，看看会遇到那些坑。
本质上感觉还是在反现在的前端过度过程化和不可控现状。

[Leviathann]

web component 现在是不是还只有经典的 class component + lifecycle api 而没有 function component + hooks/signal ？

[Leviathann]

搜了下，有个叫 Haunted 的库实现了 hooks for web component

[DOLLOR]

单纯用 Web Components 还是挺痛苦的，市面上还没有很好的最佳实践。我看到不少 Web Components 的组件库还要借助 lit 的再做一层封装。
https://lit.dev/

[Pastsong]

Web component 更适合些给别人用的通用 UI 组件，不在乎用户使用的框架。不适合把整个 app 用 web component 写

[ChefIsAwesome]

跟其它原生 api 一样，web component 是 low level api 。我们平时做项目都是用的 mvc 框架，web component 也得配这么一套东西才行。现在的 css module ，预编译，已经解决一部分最初设计 web component 时想要解决的问题了，所以用处不多。做广告这种放在别人网站的东西还是很好的。

[zdhxiong]

刚用 Web Components 写完一个完整的组件库： https://www.mdui.org/
Web Components 性能非常棒，唯一的问题是生态较弱，导致开发体验较差，不如 Vue 、React 全家桶方便。
比较好的做法是，对于需要多项目复用的组件用 Web Components 写，应用层用 Vue 、React 等写。

[himself65]

可以试试 lit 。
个人感觉大部分库对于 shadow dom 的支持还是很差的，

[Track13]

svelte/solidjs 不比 Web Components 香多了。

[nomagick]

写过 lit

搜索引擎和其他应用渲染你的页面有点障碍
写法是 OOP 的写法，大部分前端从业人员没掌握，而且很难补课，招不到，写不好

SSR 有点问题，虽然 SSR 是一种不正确的价值观，是对前端进化的抵制

[seahorzhang]

非常有名的轮播 swiper 已经开发出可用的 web 组件，可以去看看。

[crysislinux]

Salesforce 那个 lwc 就是基于 web component 的，我之前写了小半年这个。感觉易用性跟三大框架差距很大。

[sjhhjx0122]

我在各种小项目重用过,也就 https://github.com/hellof2e/quark-design
https://github.com/vaadin/web-components
https://shoelace.style 这三个能用

[hez2010]

可以试试 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 ）。

[hez2010]

@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

[putaozhenhaochi]

国内各大组件库没啥动静

[passerby233]

https://omijs.github.io/home/zh/

[passerby233]

https://github.com/Tencent/omi 小白表示第一次听说 Web Components

[ysc3839]

我不是专业前端开发，之前简单了解过 Web Components ，感觉主要好处是写组件库。传统的组件库/css (比如 Bootstrap) 都是要你按要求摆出一定的元素结构，其中元素还得正确设置 class 以及其他 attr 。用 Web Components 则可以在一个“元素”中封装复杂的结构。

[RedNax]

我们公司的组件库用 Webcomponent ，由于项目都是 React/Angular ，所以会在 WebComponent 组件库上再包一层成为 React/Angular 组件库。

体验就 WebComponnet 本身就已经难写难用了，用在 React/Angular 里同样难用，比纯 React/Angular 的组件库差多了。

没有太大意义的技术。