201315Mai

X-Tag: JavaScript-Polylib für Web Components

Im Dezember letzten Jahres hatte ich über das Web UI berichtet, einer User Interface-Bibliothek für Google Dart, die von Web Components Gebrauch macht. Bei den Web Components handelt es sich um eine sehr interessante Methode, um dynamische HTML-Bausteine zu erzeugen und wiederzuverwenden. So lassen sich also eigene Komponenten erstellen, die mit HTML, CSS und JavaScript ausgestattet werden können.
Die Web Components befinden sich noch im Standardisierungsprozess des W3C und stehen aktuell nur in Google Chrome zur Verfügung. Dennoch gibt es seit einiger Zeit schon diverse Polyfills, wie beispielsweise X-Tag von Mozilla.

X-Tag - Web Components Custom Element Polylib

Bei X-Tag handelt es sich um eine kleine JavaScript-Bibliothek, die das Verhalten eines Web Components simuliert: So können eigene HTML-Tags definiert werden, die komplette Widgets enthalten können, wie etwa ein Accordion, ein Kontaktformular oder gar eine Kartenansicht. Das Panel-Beispiel zeigt etwa das asynchrone Laden einer HTML-Datei in einen Container. Der X-Tag-Code dazu sieht aus wie folgt:

  • <x-panel src="some-page.html"></x-panel>

Es gibt noch weitere Polyfills für Web Components, wie beispielsweise Model Driven Views, die ebenfalls vielversprechend aussehen.