vue3-shoelace-demo - CodeSandbox
Shoelace 是一款面向未来的 Web 组件库，提供了一系列专业设计且高度可定制的 UI 组件，这些组件均由框架中立的技术构建而成
基于 lit
使用 Stencil.js 构建
组件丰富
- 按钮支持打开链接、新开窗口、下载等
- 二维码
- 复制按钮
- 可自定义性更强，比如 popup，在线调整
- Mutation Observer 监听指定属性
- Resize Observer 监听容器尺寸变化
事件
自定义事件跟原生事件一样，要用 addEventListener
CDN
CDN + autoloader 自动懒加载
闪屏问题：解决 Flash of Undefined Custom Elements (FOUCE) 直接用方法二
定制
为 Custom Element 增加特殊选择语法 part，更可靠的选中子元素
- 显式选择，避免一级一级找
- 组件重构升级，保持 part 稳定性即可
::part() - CSS: Cascading Style Sheets | MDN
应用
Microsoft Store 使用 Shoelace、Lit、Vite 和 C# ASPNET 后端共同打造出更现代的新版本
放弃React改用Web组件，微软这次重构让开发者不解：没有任何意义_大前端_褚杏娟_InfoQ精选文章
上手，实现一个组件
my button · cyio/shoelace@b115bca