vue3-shoelace-demo - CodeSandboxopen in new window

Shoelace 是一款面向未来的 Web 组件库,提供了一系列专业设计且高度可定制的 UI 组件,这些组件均由框架中立的技术构建而成

基于 lit

使用 Stencil.js 构建

组件丰富

  • 按钮支持打开链接、新开窗口、下载等
  • 二维码
  • 复制按钮
  • 可自定义性更强,比如 popup,在线调整
  • Mutation Observer 监听指定属性
  • Resize Observer 监听容器尺寸变化

事件

自定义事件跟原生事件一样,要用 addEventListener

CDN

CDN + autoloader 自动懒加载

闪屏问题:解决 Flash of Undefined Custom Elements (FOUCE)open in new window 直接用方法二

定制

Customizingopen in new window

为 Custom Element 增加特殊选择语法 part,更可靠的选中子元素

  • 显式选择,避免一级一级找
  • 组件重构升级,保持 part 稳定性即可

::part() - CSS: Cascading Style Sheets | MDNopen in new window

image.png

应用

Microsoft Store 使用 Shoelace、Lit、Vite 和 C# ASPNET 后端共同打造出更现代的新版本

放弃React改用Web组件,微软这次重构让开发者不解:没有任何意义_大前端_褚杏娟_InfoQ精选文章open in new window

上手,实现一个组件

my button · cyio/shoelace@b115bcaopen in new window

	
Last Updated:
Contributors: gongyi01