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

2023-10-19 13:25:01 +08:00
ChrisFreeMan  ChrisFreeMan

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

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

提问有点水,见谅。

4577 次点击
所在节点   Node.js  Node.js
29 条回复
agdhole
agdhole
2023-10-20 01:24:13 +08:00
angular material 现在正在接入的底层 material 库就是 mdc 的 https://github.com/material-components/material-web
laev
laev
2023-10-20 09:26:37 +08:00
对于开发小插件,个人还是比较喜欢 svelte ,就 Web Components 当前来讲,拿来做复杂业务感觉差点意思
zhbhun
zhbhun
2023-10-20 10:06:28 +08:00
有用 ionic 开发移动端的混合应用,ionic 组件都是 web component 实现的,支持 angular 、react 和 vue ,因为使用了 shadow dom ,很多内部样式无法定制,还原设计稿的时候很痛苦,如果不定制的话,还是可以的。
pk111and222
pk111and222
2023-10-20 10:19:42 +08:00
大厂 B 端。已上生产。
chaxus
chaxus
2023-10-20 10:25:07 +08:00
TunkShif
TunkShif
2023-10-20 22:44:40 +08:00
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
image72
2023-11-21 17:20:56 +08:00
@DOLLOR 最新的 chrome-devtools-frontend 使用了 lit
chuck1in
chuck1in
2023-12-10 18:04:02 +08:00
这个 web component 没有数据绑定这种概念的吧?手写原生 dom 大家真的可以接受吗?东西大了写起来恐怕不是那么容易哦?
byp
byp
346 天前
@zdhxiong #7 很赞,遵循 Materail You 规范,目前还在积极维护

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/983454

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX