Web Components: Custom Elements

Web Components

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 … Weiterlesen

Web Components: HTML Imports

Web Components

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 … Weiterlesen

Web Components: Shadow DOM

Web Components

Das Konzept des Shadow DOM wird in aktuellen Browsern bereits genutzt. Ersichtlich ist dies bei Standard Komponenten wie Slidern, Buttons oder Videointerfaces. Hinter der Fassade der Video Steuerelemente, welche ein Browser für den <video> Tag automatisch anzeigt, stecken lediglich eine … Weiterlesen

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.

(mehr …)

Web Components: Einführung

Web Components

Web Components geben den Entwickler die Möglichkeit das bestehende Set an HTML Elementen mit eigenen Definitionen zu erweitern. Diese Definitionen kapseln Markup und Styles gegen aussen und gewährleisten dass die Elemente immer wie gewünscht aussehen, ungeachtet des Kontexts. Das Konzept … Weiterlesen