Web Components: HTML Templates

Web Components Logo
HTML Templates, das erste Puzzlestück zum Verständniss von Web Components.

Wer Mustache, Handlebars oder doT.js bereits einmal eingesetzt hat ist vertraut mit dem Konzept des Frontend Templating. HTML Templates ist die native Browserumsetzung dieses Konzepts.

HTML Templates sind Markup Schnippsel die es vereinfachen nach dem Laden einer Seite dynamisch Markup hinzuzufügen. Der Inhalt des Templates ist zu Beginn inaktiv und wird beim Seitenaufbau lediglich auf Validität überprüft. Sprich Script Code wird nicht interpretiert, Bilder, Audio sowie andere Resourcen werden nicht geladen und das Markup wird nicht gerendert.
Auf das Markup im Template kann man auch nicht zugreifen über das Dokument Objekt (sprich mit dem querySelector). Erst beim Klonen eines Templates erwacht das Template zum Leben.

Templates definiert man mit dem neuen template Tag welcher noch im Draft Status ist (Candidate Recommendation bei W3C und Living Standard bei WHATWG).
Templates können im head oder body eines Dokumentes definiert oder über den HTML Import (Details in einem späteren Post) geladen werden.

<template>
   ...
</template>

Mithilfe von Javascript und dem Template Attribut content kann man Templates klonen und diese durch Einfügen in den DOM „aktivieren“.
Klonen kann man beliebig oft und mit beliebigen Anpassungen des Markups.

<!-- HTML Template -->
<template id="commentTemplate">
    <div>
        <img src="">
        <div class="comment-text"></div>
    </div>
</template>
<!-- Template klonen -->
<script>
     var imageUrl = 'http://html5-demos.appspot.com/static/webcomponents/images/logos/webcomponents.png';
     var text = 'HTML Templates rock';
     // Template referenzieren
     var t = document.querySelector("#commentTemplate");
     // Template klonen
     var comment = t.content.cloneNode(true);
     // Template modifizieren
     comment.querySelector('img').src = imageUrl;
     comment.querySelector('.comment-text').textContent = text;
     // Template einfügen
     document.body.appendChild(comment);
</script>

CodePen Link

Feature Detection

Um herauszufinden ob ein Browser HTML Templates unterstützt kann folgender Code von Eric Bridelman verwendet werden.

function supportsTemplate() {
  return 'content' in document.createElement('template');
}

if (supportsTemplate()) {
  // Good to go!
} else {
  // Use old templating techniques or libraries.
}

 

Browsersupport

Aktuell werden HTML Templates unterstützt von Chrome, Firefox und Opera. Safari und der Internet Explorer bieten noch keinen Support.

Links

Ein Gedanke zu “Web Components: HTML Templates

  1. Pingback: Web Components: HTML Imports – Frontend

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>