Nach einer kleinen Pause geht es Heute mit einem sehr interessanten Thema weiter: Wie wir eigene HTML-Elemente erstellen und diese nutzen. Das bedeutet wir können eigene Elemente wie z.B. <my-element>...</my-element> erstellen, stylen und mit Javascript ausstatten.

Eigene HTML-Elemente?

Ja, es ist richtig… Eigene Elemente sind bei weitem kein Hexenwerk. Wir können diese einfach im HTML Quelltext einbauen und mit Hilfe von CSS stylen – das ist nichts neues.

Der interessante Teil ist allerdings der Javascript-Part! Denn eigene Elemente werden nicht etwa als HTMLElement angesehen sondern HTMLUnknownElement. Zumindest solange, bis wir die Elemente via document.registerElement(); registrieren… Und hier beginnt der eigentliche Spaß!

Der Aufbau und die Regeln

Für diesen Eintrag arbeiten wir mit folgendem HTML-Schnipsel:

<my-element>...</my-element>

Folgendes müsst ihr beachten: Eigene Elemente müssen immer einen bindestrich (-) im Namen haben. Sonstige Regeln gibt es eigentlich nicht – es sind alle Attribute erlaubt!
Das dazugehörige Javascript Snippet ist ebenfalls sehr schlicht:

document.registerElement('my-element');

Okay, wir haben nun also ein eigenes HTML Element das wir dargestellt bekommen und stylen können – darüber hinaus wurde es dem Browser bekannt gemacht und kann nun mit Javascript interagieren…

Element-spezifische API

Ganz genau, eigene Elemente können eine komplett eigenständige API beinhalten. Dadurch können wir z.B. Widgets erstellen die vollkommen Autark und im eigenen Kontext arbeiten! Das bedeutet, wir können unseren Elementen im Javascript eigene Methoden zuweisen die bestimmte Aufgaben übernehmen, indem wir beispielsweise auf die (Element-) eigenen Attribute zugreifen. Dazu müssen wir nur einen eigenen Prototypen erstellen, der wiederum von HTMLElement ableitet:

<my-element attr="World">...</my-element>
<my-element attr="Mars">...</my-element>
<my-element attr="Venus">...</my-element>

var myProto = Object.create(HTMLElement.prototype);

// Create a method for all "my-element" elements.
myProto.helloWorld = function() {
   this.innerHTML = 'Hello ' + (this.getAttribute('attr') || 'World');
};

// Register the element with the given prototype.
document.registerElement('my-element', {prototype: myProto});

// ...

// Select the element and call the method.
document.querySelector('my-element').helloWorld();

// Or via Framework (Prototype Syntax)
$$('my-element').invoke('helloWorld');

Mehr Beispiele

Unter anderem habe ich diese beiden Beispiele gefunden die uns zeigen wie wir eigene Elemente sinnvoll einsetzen können und diese auch gleichzeitig mit der API von anderen Elementen erweitern können:
Eduardo Lundgrens google-maps-element und video-camera-element.

Das google-maps Element erstellt eine komplette Googlemap integration durch das einfache abtippen von:

<google-maps latitude="51.21" longitude="6.77"></google-maps>

Während das video-camera Element ein schönes Beispiel für die Vererbung einer vorhandener API darstellt.

Doch bevor nun jeder eifrig seinen Editor öffnet und das gelernte in die Tat umsetzt möchte ich ein weiteres sehr wichtiges Thema ansprechen:

Browserkompatibilität und Polymer

Leider ist die registerElement() Methode noch relativ neu und wird erst von wenigen aktuellen Browsern unterstützt. Genau hier kommt Polymer ins Spiel. Das Skript bietet einen sauberen Polyfill zum verwenden der registerElement() funktionalität.
Wie diese genau funktioniert könnt ihr euch beim google-maps und video-camera Element abschauen 😉

Für mehr Informationen könnt ihr euch den großartigen Blogeintrag von Peter Gasston auf smashingmagazine.com oder auch das Tutorial auf html5rocks.com von Eric Bidelman durchlesen. Das Thema ist definitiv interessant und eröffnet viele neue Möglichkeiten für uns Web Entwickler!

Bis zum nächsten Dienstag wünsche ich euch eine sonnige Woche und natürlich Happy Coding!