Das Komponenten-Library für die Frameworks

Shoelace 2.0 setzt auf Web Components für alle JavaScript-Frameworks
Keine Kommentare

Wiederverwendbare Web Components sind schon lange ein heißes Thema in der JavaScript-Welt. Eine Web Component, die man überall verwenden kann, klingt für viele Entwickler verlockend! Die Komponenten-Library Shoelace, die nun in Version 2.0 vorliegt, verspricht genau das.

Shoelace 2.0 ist da. Das Release verändert einiges an der Komponenten-Library, die ursprünglich als leichtgewichtige Alternative zu Bootstrap entwickelt worden war und vor allem mit dem Einsatz von CSS Custom Properties punktete. Version 2.0 setzt nicht mehr nur darauf, sondern stellt Web Components in den Mittelpunkt. Die Library bietet eine Reihe von Komponenten an, die mit jedem anderen Framework wie Angular, React oder Vue kompatibel sind. Das entspricht der Grundidee der Web Components: Einmal Code schreiben, überall nutzen. Manfred Steyer hat auf der International JavaScript Conference bereits 2018 darüber gesprochen, dass Web Components zu einer Liberalisierung der Framework-Wahl führen werden. Mit Web Components, so Steyer, könne die richtige Lösung für jeden einzelnen Teil einer Anwendung gewählt werden, sodass man nicht mehr auf ein Framework festgelegt sei. In diese Richtung geht nun auch Shoelace 2.0, das alle angebotenen Komponenten so gestaltet hat, dass sie überall eingebaut werden können.

Shoelace 2.0: Web Components in CDNs verwenden

Shoelace 2.0 bringt eine Reihe von Komponenten mit, die im Hintergrund mit Stencil als Compiler erstellt wurden. Neben der Kompatibilität mit allen JavaScript-Frameworks gehörte auch die Individualisierbarkeit der Elemente zu den Zielen von v2. UX und Funktionsweise sind festgelegt; die Gestaltung bleibt aber weiterhin per CSS Custom Properties in der Hand der Anwender. Die fertigen Komponenten können in CDNs ausgeliefert werden.

Eine Komponente, die einen Dialog ausgibt, wird in Shoelace beispielsweise so erstellt, wie Entwickler Cory LaViska in der Ankündigung zu v2 zeigt:

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

Weitere Informationen zu Shoelace 2.0 können der Projekt-Vorstellung des Entwicklers entnommen werden. Auch die Dokumentation auf der Website des Projekts ist bereits auf v2 angepasst worden. Die auf GitHub verfügbare Library steht unter MIT-Lizenz und kann kostenlos genutzt werden.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -