Shoelace 2.0 relies on Web Components for all JavaScript frameworks

Reusable Web Components have long been a hot topic in the JavaScript world. A web component that can be used anywhere sounds tempting to many developers! The component library Shoelace, which is now available in version 2.0, promises exactly that.

Shoelace 2.0 is here. The release changes a few things in the component library, which was originally developed as a lightweight alternative to Bootstrap and scored particularly well with the use of CSS Custom Properties. Version 2.0 no longer just relies on it, but focuses on Web Components. The library offers a number of components that are compatible with any other framework such as Angular, React or Vue. This corresponds to the basic idea of ​​the Web Components: Write code once, use it everywhere. Manfred Steyer spoke about it at the International JavaScript Conference in 2018that Web Components will lead to a liberalization of the framework choice. With Web Components, says Steyer, the right solution can be selected for each individual part of an application, so that one is no longer tied to one framework. Shoelace 2.0 is now also moving in this direction, which has designed all the components on offer so that they can be installed anywhere.

Shoelace 2.0: Using Web Components in CDNs

Shoelace 2.0 brings a number of components that were created in the background with Stencil as a compiler. In addition to compatibility with all JavaScript frameworks, the ability to customize the elements was one of the goals of v2. UX and functionality are fixed; however, the design remains in the hands of the user via CSS Custom Properties. The finished components can be delivered in CDNs.

A component that outputs a dialog is created in Shoelace, for example, as developer Cory LaViska shows in the announcement for v2:

<! - 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>

Further information on Shoelace 2.0 can be found in the developer’s project presentation . The documentation on the project website has also already been adapted to v2. The library available on GitHub is under MIT license and can be used free of charge.

Leave a Reply