Templates, Shadow DOM, Custom Elements und Imports: Web Components und ihr Beitrag zu einem guten HTML
Kommentare

In ihrem „Guide to Web Components“ zeigen Webdesigner Chris Coyier und Webentwickler Rob Dodson, wie sehr Web Components die Good Practice in HTML wandeln können, wenn sie bald durch das W3C gewunken

In ihrem „Guide to Web Components“ zeigen Webdesigner Chris Coyier und Webentwickler Rob Dodson, wie sehr Web Components die Good Practice in HTML wandeln können, wenn sie bald durch das W3C gewunken werden und auch abseits von Chrome Canary verfügbar werden. Dabei gehen die Autoren detailliert auf die Komponenten Templates, Shadow DOM, Custom Elements und Imports ein und erklären sie näher:

Custom Elements sind vom Entwickler selbst festgelegte HTML-Tags, mit denen sich Elemente wie Slideshows wesentlich weniger umständlich als bisher einbinden lassen. Zudem werden HTML und CSS in ihnen gekapselt, sodass sie unaufdringlich in anderen Seiten wiederverwendet oder im Ganzen im Browser gecacht werden können.

Der Shadow DOM ist ein Bereich für versteckten HTML-Code, den Browser-Hersteller für eigene Detail-Spezifizierungen reserviert haben. So wird dort in Userland Code festgelegt, wie der „Play“-Button im Video-Element aussieht. Um auch Custom Elements mit Shadow DOM zu versehen, den man vor Augen anderer Webentwickler verbergen möchte (oder um einfach weniger sichtbaren Bloat im Markup zu haben), wird der Zugriff auf diesen düsteren Bereich über Templates ermöglicht.

In diesen Vorlagen lassen sich bestimmte HTML- und CSS-Lösungen vorspeichern, die zur Laufzeit der Web-App via JavaScript aktiviert werden können. Wie exakt dies umgesetzt wird, erklären die Autoren im weiteren verlauf des sehr lesenswerten Blog-Eintrages.

An anderer Stelle, nämlich bei HTML5Rocks, erklärt Eric Bidelman, was es mit den HTML Imports auf sich hat. Damit nämlich werden komplette HTML-Dokumente ineinander importierbar gemacht, was Hacks wie ein Ende bereiten sollte. Sobald dieser Standard in allen Browsern etabliert ist, eröffnen sich damit ganz neue Möglichkeiten, was das Nachladen Client-spezifischen Markups und CSS angeht. Frameworks wie Bootstrap ließen sich viel kompakter über als über eine Reihe von und einbinden. Das importierte Dokument allerdings muss über neue APIs angestuert werden, die Bidelman im weiteren Verlauf näher erläutert.

Also macht euch bereit für die nächste Generation HTML. Es wird eine gute Zeit für Webentwicklung. Und wenn euch schon jetzt Ideen für die Implementierung der neuen Spezifikationen kommen, dann teilt sie gerne unten in den Kommentaren mit uns und den anderen Lesern.

Aufmacherbild: WWW On Monitors von Shutterstock / Urheberrecht: Stuart Miles

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -