Abo
  • Services:
Anzeige
Polymer sol Web Components in heutigen Browsern verfügbar machen.
Polymer sol Web Components in heutigen Browsern verfügbar machen. (Bild: Polymer Project)

Web Components: HTML-Elemente selber bauen

Polymer sol Web Components in heutigen Browsern verfügbar machen.
Polymer sol Web Components in heutigen Browsern verfügbar machen. (Bild: Polymer Project)

Mit Web Components, die derzeit vom W3C standardisiert werden, kann sich jeder seine eigenen HTML-Elemente bauen - samt Aussehen und Logik - und sie wie Standardelemente in HTML-Dokumenten nutzen. Mit Googles neuer Bibliothek Polymer funktioniert das auch in den heute verfügbaren Browsern.

Web Components gehören zu den interessantesten neuen Webtechniken, denn sie haben das Potenzial, die Entwicklung von Web-Apps enorm zu vereinfachen und zu beschleunigen. Damit kann jeder seine eigenen, komplexen HTML-Elemente selbst bauen oder von anderen erschaffene Elemente in der eigenen App oder Website nutzen. Möglich ist alles, was sich mit HTML, CSS und Javascript umsetzen lässt, von einer einfachen Überschrift mit fest definiertem Aussehen über einen Videoplayer bis hin zu einem PDF-Tag, das eine entsprechende Datei im Browser mittels pdf.js rendert. Auch komplette Applikationen lassen sich in Form eines solchen Tags einfügen.

Anzeige

Vieles, was heute über Javascript-Bibliotheken abgewickelt wird, könnte künftig in Form einzelner Webkomponenten umgesetzt werden. Das verringert Abhängigkeiten und sorgt für mehr Flexibilität. Bis die dafür notwendigen Webstandards aber verabschiedet, in Browsern umgesetzt und diese bei ausreichend Nutzern installiert sind, wird aber noch einige Zeit vergehen. Google hat daher mit Polymer eine Bibliothek entwickelt, die die Nutzung von Webkomponenten schon heute ermöglicht und dazu je nach den im Browser vorhandenen Funktionen die fehlenden Teile ergänzt. Damit lassen sich Web-Apps deutlich schneller entwickeln.

Die Technik hinter Web Components

Für Web Components werden verschiedene Techniken benötigt, die in einzelnen Spezifikationen von W3C und Browserherstellern derzeit im Rahmen erarbeitet werden. Einige davon sind schon recht weit und ganz oder teilweise in Browsern umgesetzt, andere stehen noch ganz am Anfang ihrer Entwicklung. Zu den wichtigsten Techniken gehören HTML Imports, Custom Elements und Shadow DOM. Hinzu kommen Model Driven Views. Dabei handelt es sich bisher aber nur um eine Idee von Google.

HTML Imports und Custom Elements

HTML Imports ermöglichen es, HTML-Dokumente in HTML-Dokumenten zu verwenden und so HTML-Schnipsel wiederzuverwenden. Es handelt sich also um HTML-Code, der über einen Import im Kopf einer HTML-Datei eingebunden wird und unter einer beliebigen URL abgerufen werden kann.

Dabei kann es sich dann um sogenannte Custom Elements handeln, also selbsterstellte HTML-Elemente. Diese werden immer mit einem Element-Tag umklammert und können neben HTML auch CSS zur Gestaltung des Aussehens und Javascript-Code zur Beschreibung der Logik umfassen. Dies sind also die eigentlichen Bausteine, die die selbsterzeugten HTML-Tags ausfüllen. Beispielsweise kann ein Tag namens <superbutton></superbutton> definiert werden, das zur Darstellung eines Superbuttons führt. Wie dieser aussieht und was er tut, ist im Element-Code festgelegt.

Das Shadow DOM

Das Shadow DOM sorgt dafür, dass sich die selbstgebauten Elemente nicht gegenseitig stören oder die Website beeinflussen. Es sorgt für eine Kapselung, indem versteckte DOM-Unterzweige angelegt werden, die hinter sogenannten Schattenwurzeln (Shadow Roots) liegen. Jedes Element hat also sein eigenes kleines DOM, in dem es abgekapselt von allen anderen Elementen liegt.

Diesen Ansatz nutzen Browser schon heute, um ihre eigenen Elemente, die zunehmend mit Webtechnik umgesetzt sind, zu kapseln. Beispielsweise sind die Bedienungselemente, die Browser bei Videos über das HTML5-Video-Tag einblenden, selbst mit HTML, CSS und Javascript umgesetzt.

Shadow DOM stellt dabei Methoden zur Verfügung, mit denen sich funktionale Barrieren zwischen den einzelnen DOM-Zweigen einziehen lassen. Zugleich stellt das Shadow DOM aber auch Möglichkeiten zur Interaktion dieser DOM-Zweige her.

Model Driven Views

Google schlägt darüber hinaus Model Driven Views vor, um das User Interface eines HTML-Dokuments oder einer Web-App vom verwendeten Datenmodell zu trennen. Änderungen am Modell sollen so automatisch im DOM reflektiert werden und Nutzereingaben direkt im Datenmodell landen. So sollen sich die einzelnen Elemente leicht miteinander verknüpfen lassen, damit sich beispielsweise der Inhalt eines Elementes verändert, wenn ein Nutzer ein anderes Tab in einer Tab-Leiste auswählt, die ihrerseits als einzelnes Custom-Element umgesetzt wurde.

Auf der Entwicklerkonferenz Google I/O hat Google mit Polymer eine neue Javascript-Bibliothek vorgestellt, die viele der für Web Components notwendigen Funktionen in modernen Browsern emuliert.

Polymer 

eye home zur Startseite
bofhl 22. Mai 2013

Eine HTML5-Bibliothek? Eher eine Javascript-Bibliothek . ;-))

bofhl 22. Mai 2013

Der IE9 hat halt nicht wirklich HTML5 sowie CSS3 laut der finalen Definition umgesetzt...

Chronos 21. Mai 2013

Hm ich nutze unter N++ ja Obsidian als Theme und als Schriftart von Adobe Sourcecode Pro...

TheUnichi 19. Mai 2013

Ob es nun eine riesige Liste an JavaScript Imports oder HTML Imports gibt ist doch völlig...

opodeldox 18. Mai 2013

Das wird nicht möglich sein. Schon heute kann man mit den Chrome Entwickler Tools Shadow...



Anzeige

Stellenmarkt
  1. Südwestrundfunk, Stuttgart
  2. AOK - Die Gesundheitskasse für Niedersachsen, Hannover
  3. CENIT AG, Stuttgart, deutschlandweit
  4. Anklam Extrakt GmbH, Anklam


Anzeige
Blu-ray-Angebote
  1. (u. a. The Complete Bourne Collection Blu-ray 14,99€, Harry Potter Complete Blu-ray 44,99€)
  2. (u. a. Interstellar, Maze Runner, Kingsman, 96 Hours)
  3. (u. a. Die große Bud Spencer-Box Blu-ray 16,97€, Club der roten Bänder 1. Staffel Blu-ray 14...

Folgen Sie uns
       


  1. Zero G

    Schwerelos im Quadrocopter

  2. Streaming

    Youtube hat 1 Milliarde US-Dollar an Musikindustrie gezahlt

  3. US-Wahl 2016

    Nein, Big Data erklärt Donald Trumps Wahlsieg nicht

  4. Online-Hundefutter

    150.000 Euro Strafe wegen unerlaubter Telefonwerbung

  5. Huawei

    Vectoring mit 300 MBit/s wird in Deutschland angewandt

  6. The Dash

    Bragi bekommt Bluetooth-Probleme nicht in den Griff

  7. Bugs in Encase

    Mit dem Forensik-Tool die Polizei hacken

  8. Autonomes Fahren

    Verbraucherschützer fordern "Algorithmen-TÜV"

  9. The Last Guardian im Test

    Gassi gehen mit einem computergesteuerten Riesenbiest

  10. E-Sport

    Cheats und Bots in Südkorea offenbar gesetzlich verboten



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Gear S3 im Test: Großes Display, großer Akku, große Uhr
Gear S3 im Test
Großes Display, großer Akku, große Uhr
  1. In der Zuliefererkette Samsung und Panasonic sollen Arbeiter ausgebeutet haben
  2. Vernetztes Auto Samsung kauft Harman für 8 Milliarden US-Dollar
  3. 10LPU und 14LPU Samsung mit günstigerem 10- und schnellerem 14-nm-Prozess

Robot Operating System: Was Bratwurst-Bot und autonome Autos gemeinsam haben
Robot Operating System
Was Bratwurst-Bot und autonome Autos gemeinsam haben
  1. Roboterarm Dobot M1 - der Industrieroboter für daheim
  2. Roboter Laundroid faltet die Wäsche
  3. Fahrbare Roboter Japanische Firmen arbeiten an Transformers

Super Mario Bros. (1985): Fahrt ab auf den Bruder!
Super Mario Bros. (1985)
Fahrt ab auf den Bruder!
  1. Quake (1996) Urknall für Mouselook, Mods und moderne 3D-Grafik
  2. NES Classic Mini im Vergleichstest Technischer K.o.-Sieg für die Original-Hardware

  1. Re: Manipulation erkennen

    M. | 22:16

  2. Re: Bullshit!

    GenXRoad | 22:14

  3. Re: Ok IT Forum aber wieso im so digital im Denken?

    Der Spatz | 22:12

  4. Re: Und dann ist es vorbei ...

    david_rieger | 22:09

  5. Re: Bitte auch in der EU / Deutschland

    Gandalf2210 | 22:01


  1. 18:49

  2. 17:38

  3. 17:20

  4. 16:42

  5. 15:05

  6. 14:54

  7. 14:50

  8. 14:14


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel