Web Components: Einführung

Web Components Logo
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 von Web Components kann in fünf Unterbereiche aufgeteilt werden:

  • Custom Elements
  • HTML Templates
  • Shadow DOM
  • Decorators
  • HTML Imports

Diese werden in späteren Posts detaillierter erklärt. In diesem Post soll erstmals ein Überblick zu Web Components als Ganzes gegeben werden.

Aktueller Status

Web Components ist im Frontendbereich ein Trendthema. W3C schreibt fleissig Draft Spezifikationen, Mozilla baut Prototypen (x-tag und Brick) und Google arbeitet am Polymer Projekt um modernen Browsern die Verwendung von Web Components zu ermöglichen. Mozilla arbeitet insofern mit Google zusammen dass x-tags auf Komponenten des Polymer Projektes aufbauen. Nativ werden Web Components erst vom Chrome Canary unterstützt. Für moderne Browser ohne nativen Support bietet das Polymer Project sogenannte Polyfills. Polyfills sind Bibliotheken welche die fehlenden Funktionalitäten bereitstellen.

Nun gut, aber was bringen mir Web Components?

Web Components bieten ein Konstrukt um Webseiten sauber zu Modularisieren. Bis anhin gab es unterschiedliche Philosophien wie man eine Modularisierung erreicht. Dies wird im Post Divide & Conquer — An Overview About Modular Front-End Architectures anschaulich beschrieben. Das Projekt Terrific greift die Thematik ebenfalls auf und bietet ein Framework zur Modularisierung basierend auf Namenskonventionen.

Web Components Komponenten

Custom Elements

Das Konzept von Web Components beschreitet beim Modularisieren von Webseiten einen neuen Weg. Es können neue HTML Tags (Custom Elements) definiert werden. Custom Elements ersetzen dabei die Methode bei welcher Elementgruppen oder Widgets durch div-Tags mit Attributen, CSS Klassen oder IDs abgegrenzt werden. Custom Elements kapseln den Inhalt und abstrahieren den HTML und CSS Code gegen aussen mithilfe eines Shadow DOM.

HTML Templates

Custom Elements basieren auf Templates. Templates stellen das Baugerüst für Custom Elements dar. In aktuellen Projekten nutzen Entwickler Frameworks wie handlebar, doT.js oder mustache für das Frontend Templating. Templates bieten vergleichbare Möglichkeiten. Es wird jedoch Standard HTML Syntax innerhalb eines <template> Tags verwendet.

Shadow DOM

Web Components definieren mithilfe des Shadow DOM Konzepts einen eigenen Geltungsbereich im DOM in Sachen Aufbau und Aussehen. Konkret bedeutet das dass jedes HTML Element als Shadow Host auftreten kann. Gegen aussen ersichtlich ist nur der HTML Tag. Innerhalb versteckt sich der Shadow DOM mit zusätzlichem Markup und Styles.
Hast du dich schon einmal gefragt wo alle Steuerelemente des Video Elementes <audio> herkommen? Die Antwort ist Shadow DOM. In aktuellen Browsern wird dieses Konzept bereits angewendet für Elemente wie <video>, <audio> oder <input>.
Die Abgrenzung erlaubt es auch Widgets ungeachtet der eingebundenen Stylesheets und definierten Styles immer gleich aussehen zu lassen.

Decorators

Decorators sind erst vage vom W3C umschrieben. Sie sollen helfen bestehende HTML Elemente auf eindeutige Weise mit Markup, Styles und Event Handlern zu erweitern.

HTML Imports

Ermöglicht das Importieren von Custom Elements und Decorators.

Links
Folgende Links bieten einen guten Einstieg um Web Components verstehen zu lernen:

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>