Web Components

Moderne Webseiten werden immer komplexer und nehmen Inhalte Dritter, Widgets ([ˈwɪʤət] aus Window Gadget) und Bausteine aus vielen anderen Quellen wie CDNs und ähnlichem auf. Die Einbindung erfolgt entweder gekapselt innerhalb eines iframe oder optimalerweise per AjaX, um die Webseite einheitlich gestalten zu können. Dabei entsteht die Gefahr, dass sich Markup, Skripte und CSS-Regeln gegenseitig in die Quere kommen, wenn Klassen oder IDs mehrfach vergeben werden oder wenn die Spezifität mehrerer Regeln nicht mehr klar ist und nur noch durch das Schlüsselwort !important erreicht werden kann.

Browserunterstützung
caniuse.com

Mit Web Components können Sie eigene wiederverwendbare Bausteine entwerfen, deren HTML-Elemente gekapselt sind und deren CSS nur in diesem Gültigkeitsbereich angewandt wird. Diese werden ins normale DOM der Webseite eingehängt und sind für Debugger und Skripte nicht direkt sicht- und ansprechbar.

Dabei handelt es sich um keine eigene, in sich abgeschlossene API, sondern um eine Erweiterung des DOM und HTML Standards.

Die Bausteine für Web Components können einzeln verwendet werden, entfalten aber erst gemeinsam ihre volle Wirkung.

• 

  HTML Templates
  Deklarieren HTML-Vorlagen, die durch JavaScript ins DOM kopiert werden können
   
• Shadow DOM
  HTML-Bereiche erstellen, deren Inhalt von Scripten und CSS-Regeln isoliert ist.
   
• Custom Elements
  Eigene HTML Elemente erzeugen, deren Verhalten mit JavaScript programmiert wird
   

• Web Components
  (Übersicht)
• HTML templates

Siehe auch

• 

  Einbinden einer OSM-Karte als Beispiel für Custom Elements

  SELF-Blog-Artikel von Jürgen Berkemeier,
  Leaflet ist eine API, um Karten in Webseiten einzubinden

   
• Web-Components
  Eine Einführung

  Raoul Schaffranek
  SelfHTML-Blog vom 09.12.2014
  (verwendet die obsolete v0)

   

Weblinks

• speakerdeck: Web Components von Gunnar Bittersmann
• speakerdeck: Ein Überblick zu Web Components von Thomas Meinike mit vielen interessanten Beispielen