Web Components: Custom Elements

Web Components LogoPolymer Logo

Mit den einzelnen Teilstücken aus vorhergehenden Posts können wir uns nun daran machen eigene Elemente in HTML zu erstellen.

In diesem Post sehen wir anhand eines Beispiels wie HTML Templates, Shadow DOM und HTML Imports kombiniert werden können. Als zugrundeliegendes Framework setze ich dabei Polymer ein. Alternativen dazu wären Umsetzungen mit X-Tag oder VanillaJS

Polymer Logo

Polymer
Polymer bietet einerseits eine einfache Möglichkeit eigene HTML Element zu definieren aber stellt auch eine grosse Anzahl bereits verwendbarer Element zur Verfügung.
Polymer setzt dabei die aktuell verfügbare Spezifikation von Web Components nach eigener Auslegung um.

Polymer nutzen
Es gibt diverse NPM Pakete für Polymer. Nützlich sind dabei vor allem die Polyfills unter Webcomponents.js.

Wenn man Bower nutzt kann man Polymer Elemente modular beziehen.
Man kann zum Beispiel die Funktionalität zur Erstellung eigener Elemente einsetzen:

bower install --save Polymer/polymer

Oder man nutzt das Iconset:

bower install --save Polymer/core-icons

Alternativ kann die ganze Polymer Bibliothek auch als ZIP heruntergeladen werden oder über Github genutzt werden.

Icon Beispiel
Wenn man mit Bower das Paket Polymer/core-icons installiert hat kann man mit folgendem Beispiel das core-icon Element nutzen:

<!DOCTYPE html>
<html>
  <head>
    <!-- 1. Load platform support before any code that touches the DOM. -->
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <!-- 2. Load the component using an HTML Import -->
    <link rel="import" href="bower_components/core-icons/core-icons.html">
    <link rel="import" href="bower_components/core-icon/core-icon.html">
  </head>
  <body>
    <!-- 3. Declare the element by its tag. -->
    <core-icon icon="face"></core-icon>
  </body>
</html>

Element Bibliothek
Die Element Bibliothek von Polymer unterteilt sich in Core Elemente und Paper Elemente.

Die Core Elemente umfassen visuelle Komponenten um mit Layouts, Icons, Eingaben und Toolbars zu hantieren sowie nicht-visuelle um Features wie AJAX zu nutzen oder Grundgerüste für Apps zu nutzen.
Mit Bower:

bower install --save Polymer/core-elements

Die Paper Elemente bieten eine Umsetzung von visuellen Elementen im Material Design von Google.

Paper Element Buttons

Paper Element Buttons

bower install --save Polymer/paper-elements

Element erstellen
Um ein eigenes Element zu erstellen muss mindestens der Polymer Core vorhanden sein:

bower install --save Polymer/polymer

Beispiel Element color-picker
Eigene Elemente bündelt man am besten in einem separaten Ordner wie z.B. „elements“. In diesem Ordner erstellt man ein neues File mit dem Namen des Elementes und mit der Endung „.html“. In unserem Beispiel „color-picker.html“.
Darin fügt man folgenden Code hinzu:

<!-- HTML Import-->
<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="color-picker" attributes="owner color name">
  <!-- HTML Template-->
  <template>
    <label for="nameInput">Synonym for <i>awesome</i>:</label>
    <input id="nameInput" value="{{name}}" placeholder="Enter word of enthusiasm...">
    <p>Have a look at the {{name}} color element.</p>
    {{owner}} says:
    <div style="color:{{color}}">
      <!-- Content injection in Shadow DOM -->
      <content></content>
    </div>
  </template>
  <script>
    Polymer({
      // These default values are overridden
      // by the user's attribute values.
      color: "red",
      owner: "Daniel",
      name: "fantastic",
      nameChanged: function() {
        if (this.name) {
          // Ensure name is uppercase
          this.name = this.name.toUpperCase();
        }
      }
    });
  </script>
</polymer-element>

In diesem Beispiel sehen wir Anwendungsbeispiele der verschiedenen Web Components Elemente. In diesem Beispiel sieht man auch dass Polymer einfaches data binding und event handling ermöglicht.

Wichtig ist die Naming Convention dass Namen von Custom Elements aus mindestens 2 Wörtern bestehen müssen welche durch einen Bindestrich „-“ getrennt sind (also z.B. my-ajax-element oder fancy-flyout).

Folgendes Snippet zeigt die Anwendung des neuen Elementes:

<!DOCTYPE html>
<html>
  <head>
    <!-- 1. Load platform support before any code that touches the DOM. -->
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <!-- 2. Load the component using an HTML Import -->
    <link rel="import" href="bower_components/core-icons/core-icons.html">
    <link rel="import" href="bower_components/core-icon/core-icon.html">
    <link rel="import" href="elements/color-picker.html">
  </head>
  <body>
    <!-- 3. Declare the element by its tag. -->
    <color-picker owner="Namics" color="green">
      <core-icon icon="face"></core-icon>
      Namics.Seit 1995.
    </color-picker>
  </body>
</html>

Ergebnis
Das Ergebnis sieht dann so aus:
Custom Element Ausgabe
Nach Eingabe von „stunning“ erscheint:
Custom Element mit Text Stunning

Browsersupport
Polymer ist mithilfe von Polyfills in allen Browsern einsetzbar. Ab Chrome 36+ werden die Polyfills in Webcomponents.js nicht mehr benötigt.

Links
Polymer Projekt
Custom Elements Library
NPM: Webcomponents.js

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>