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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 191 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

提问有点水，见谅。

Components

Web

端来点

复杂度

29 条回复 • 2024-03-12 17:37:27 +08:00

thinkershare

191 天前

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

Leviathann

191 天前

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

Leviathann

191 天前

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

DOLLOR

191 天前 via Android

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

Pastsong

191 天前 via Android

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

ChefIsAwesome

191 天前

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

zdhxiong

191 天前

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

himself65

191 天前 via iPhone

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

Track13

191 天前

svelte/solidjs 不比 Web Components 香多了。

nomagick

191 天前

写过 lit

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

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

seahorzhang

191 天前 via iPhone

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

crysislinux

191 天前

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

sjhhjx0122

191 天前

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

hez2010

191 天前

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

191 天前

@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

191 天前 via iPhone

国内各大组件库没啥动静

passerby233

191 天前

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

passerby233

191 天前

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

ysc3839

191 天前 via Android

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

RedNax

191 天前

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

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

没有太大意义的技术。

agdhole

191 天前

angular material 现在正在接入的底层 material 库就是 mdc 的 https://github.com/material-components/material-web

laev

190 天前

对于开发小插件，个人还是比较喜欢 svelte ，就 Web Components 当前来讲，拿来做复杂业务感觉差点意思

zhbhun

190 天前

有用 ionic 开发移动端的混合应用，ionic 组件都是 web component 实现的，支持 angular 、react 和 vue ，因为使用了 shadow dom ，很多内部样式无法定制，还原设计稿的时候很痛苦，如果不定制的话，还是可以的。

pk111and222

190 天前 via Android

大厂 B 端。已上生产。

chaxus

190 天前

https://chaxus.github.io/ran/src/ranui/ 之前尝试过

TunkShif

190 天前

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 组件库，文档里对主题、动画、本地化定制，还有前面提到的表单的问题都有给出解决方案。

image72

158 天前

@DOLLOR 最新的 chrome-devtools-frontend 使用了 lit

chuck1in

139 天前

这个 web component 没有数据绑定这种概念的吧？手写原生 dom 大家真的可以接受吗？东西大了写起来恐怕不是那么容易哦？

byp

46 天前

@zdhxiong #7 很赞，遵循 Materail You 规范，目前还在积极维护