Web Components: HTML Imports

Web Components Logo

In einem früheren Post zu HTML Templates wurde erklärt wie Templates erstellt werden können.

Um eine grosse Anzahl solcher Templates übersichtlich zu verwalten müssen diese ausgelagert werden und wie Stylesheets oder Skripte eingebunden werden. Dieses Ziel erreicht man durch den Einsatz von HTML Imports.

Um Ressourcen wie CSS, JS und Bilder einzubinden sind in HTML die Tags <link/>, <script/> und <img/> vorgesehen. Für HTML Code gibt es keinen vergleichbaren Tag. Bis anhin musste man auf iframes ausweichen, AJAX Anfragen absetzen oder gruselige Hacks nutzen.
HTML Imports bietet uns hier die Hand.

HTML Imports erlaubt das einbinden von jeglichem Inhalt der in einer .html Datei stehen kann. Sprich HTML, CSS und JS Code.

Die Syntax um HTML Imports einzusetzen nutzt den <link> Tag und sieht wie folgt aus:

<link rel="import" href="/path/to/imports/stuff.html">


Was passiert nun mit dem importierten Inhalt?
Wird er direkt eingebunden?
Nein.
Der Import macht den Inhalt lediglich verfügbar als sogenanntes import document auf welchem DOM Operation angewendet werden können.
Um auf den Inhalt des Imports zuzugreifen kann folgender Code verwendet werden:

var content = document.querySelector('link[rel="import"]').import;


JS Skripte im Import
Skripte innerhalb des Imports werden sofort beim Laden ausgeführt.
Gut zu wissen: Das Laden des Imports blockiert das Parsen der Seite nicht.

Die Skripte innerhalb der importierten Datei können auf beide DOMs zugreifen. Auf den DOM der importierenden Seite und auf den DOM der importierten Datei.
Der Kontext zur Ausführung der Skripte im Import bildet dabei der Kontext der importierenden Seite.

Beispiel
Dieses Beispiel von Eric Bridelman veranschaulicht die Anwendung von HTML Imports.
Zuerst die Import Datei warnings.html:

<div class="warning">
  <style scoped>
    h3 {
      color: red;
    }
  </style>
  <h3>Warning!</h3>
  <p>This page is under construction</p>
</div>

<div class="outdated">
  <h3>Heads up!</h3>
  <p>This content may be out of date</p>
</div>

Nun importieren wir warnings.html auf unserer Seite:

<head>
  <link rel="import" href="warnings.html">
</head>
<body>
  ...
  <script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // Grab DOM from warning.html's document.
    var el = content.querySelector('.warning');

    document.body.appendChild(el.cloneNode(true));
  </script>
</body>


Killer Feature
Richtig Spass machen HTML Imports zusammen mit Custom Elements von Web Components.
Durch HTML Imports können Custom Elements Definitionen in Dateien ausgelagert werden.
Innerhalb der ausgelagerten Datei kann mit Hilfe von JavaScript das Element auch gleich registriert werden.
Das heisst:
Um ein Custom Elements zu nutzen muss man nur noch den Import angeben und kann die Tags dann gleich verwenden. So macht entwickeln Freude.

Praktisch veranschaulicht dies das folgende Beispiel von Eric Bridelman.
Die Datei elements.html enthält die Definitionen der 2 neuen Element:

<script>
  // Define and register <say-hi>.
  var proto = Object.create(HTMLElement.prototype);

  proto.createdCallback = function() {
    this.innerHTML = 'Hello, <b>' +
                     (this.getAttribute('name') || '?') + '</b>';
  };

  document.registerElement('say-hi', {prototype: proto});

  // Define and register <shadow-element> that uses Shadow DOM.
  var proto2 = Object.create(HTMLElement.prototype);

  proto2.createdCallback = function() {
    var root = this.createShadowRoot();
    root.innerHTML = "<style>::content > *{color: red}</style>" +
                     "I'm a " + this.localName +
                     " using Shadow DOM!<content></content>";
  };
  document.registerElement('shadow-element', {prototype: proto2});
</script>

Im index.html werden die neuen Elemente verwendet:

<head>
  <link rel="import" href="elements.html">
</head>
<body>
  <say-hi name="Eric"></say-hi>
  <shadow-element>
    <div>( I'm in the light dom )</div>
  </shadow-element>
</body>



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

function supportsImports() {
  return 'import' in document.createElement('link');
}

if (supportsImports()) {
  // Good to go!
} else {
  // Use other libraries/require systems to load files.
}


Browsersupport
Aktuell werden HTML Imports unterstützt von Chrome Canary v36 oder ab Chrome 31 mit aktiviertem Feature. Alle anderen Browser bieten noch keinen Support.

Links
HTML Imports von Eric Bridelman
HTML Imports von Rob Dodson

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>