Shoelace 2.0: A Forward-thinking Library of Web Components
By
Cory LaViska on
几年前，我发布了一个轻量级的Bootstrap替代品，亲切地命名为Shoelace。Shoelace体积小、速度快，因为它的设计很简单，样式采用纯CSS方法。它使用了CSS自定义属性广泛支持自定义，即使通过CDN加载也是如此-这是Sass无法做到的。
当时，CSS自定义属性还是相当新的。
几年过去了，情况发生了变化。CSS自定义属性无处不在，是一种相对较新的技术，称为Web组件，已登陆所有现代浏览器。
Web Components
如果您不熟悉Web组件，那么它们是一组标准，使我们能够创建自己的HTML元素，并完成DOM和样式封装。事实证明，这正是我一直在等待的！
我决定是时候从头开始重建Shoelace了，所以我在2.0开始时考虑了几个目标：
It should work with CDNs
It should be easy to use and have good documentation
It should be fully customizable with CSS (no preprocessing)
It should work with any framework (or with no framework at all)
It should be built with accessibipty in mind
这些都是雄心勃勃的目标，所以我转向了我最喜欢的创作Web组件的工具Stencil是一个生成符合标准的自定义元素的编译器。我喜欢它，因为它提供了一些非常好的便利，如TypeScript，漂亮的组件API、延迟加载和多个输出目标。
如果您有兴趣构建自己的Web组件，我强烈推荐Stencil！
Redesigning Everything
随着需求和工具的排除，我开始从头开始重建一切。每一个组件都经过精心设计，使用了全新的用户体验和重新设计的API。我甚至添加了一些新组件，包括动画实用程序，使用Web动画API；表单验证，使用约束验证API和响应嵌入。
可以说，我对结果很满意遇见Shoelace 2.0
就我的要求而言，它们都得到了满足！
✅ The preferred way to use Shoelace is via CDN
✅ The documentation is pretty extensive and includes many working examples
✅ You can customize components at a high level with CSS custom properties and at a low level with CSS parts
✅ You can use Shoelace components in any framework you want
✅ Each component was built with accessibipty in mind, and there’s an ongoing effort to improve them even more
A Better Developer Experience
使用Web组件的一个巨大优势是，您可以使用熟悉的API获得真正的自定义HTML元素。让我们比较一下Bootstrap按钮和Shoelace按钮的标记。
<!-- Bootstrap -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Shoelace -->
<sl-button type="primary">Primary</sl-button>
即使使用这个简单的示例，您也可以看到所涉及的代码更少。对于复杂的组件，这一点变得更加明显。让我们来看看对话框。这是一个引导对话框。
<!-- Bootstrap -->
<span class="modal" tabindex="-1" role="dialog">
<span class="modal-dialog">
<span class="modal-content">
<span class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</span>
<span class="modal-body">
<p>Modal body text goes here.</p>
</span>
<span class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</span>
</span>
</span>
</span>
这是一个很大的标记！暴露出这些咏叹调的属性也有很大的错误空间。
现在让我们来看看一个等效的Shoelace对话框。
<!-- Shoelace -->
<sl-dialog label="Dialog">
<h3 slot="header">Modal Title</h3>
Modal body text goes here.
<sl-button slot="footer">Close</sl-button>
<sl-button slot="footer" type="primary">Save Changes</sl-button>
</sl-dialog>
这更容易操作！而且由于组件在内部处理其aria属性，因此出错的空间较小。
如果您觉得这个例子很鼓舞人心，我鼓励您浏览Shoelace网站并查看再举几个例子。我想你会感到惊喜的。
Why Use It?
在这一点上，您可能想知道是什么将Shoelace与其他组件库区分开来。首先，它与框架无关，这意味着你可以在React、Vue、Angular和任何其他框架中使用它。这非常适合那些希望使用具有相同组件的不同框架来实现一致用户体验的团队。
由于Shoelace组件是Web组件，它们建立在浏览器长期致力于支持的标准之上。随着旧框架的老化和新框架的出现，您将不必花费时间重建按钮、输入和其他低级组件。鞋带会继续工作的。
如果您更喜欢使用该平台并完全避免使用框架，那也没关系。Shoelace非常适合使用香草HTML+JS！
我差点忘了——Shoelace是开源的，根据麻省理工学院的许可证可以使用，所以它是免费的，任何人都可以为它做出贡献！
Learn More
这只是对Shoelace2.0和Web组件的快速介绍。我希望你喜欢这次更新。
如果你有兴趣了解更多关于Shoelace的信息，这里有一些你会发现有用的链接！
![Cory LaViska]()
About Cory LaViska
Cory LaViska是新罕布什尔州一家小型开发工作室A Beautiful Site，LLC的创始人。他负责Shoelace和Surreal CMS，以及GitHub上的一些开源项目
www.abeautifulsite.netclaviska帖子
