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.

• Shadow DOM: kapselt HTML-Elemente, um wiederverwendbare Komponenten zu erstellen. Diese enthalten versteckte Elemente, die von Skripten und CSS-Regeln isoliert sind.
• custom elements ermöglichen, eigene Elemente zu erstellen oder bestehende zu erweitern
• template ermöglicht, bisher dynamisch erzeugten Code als Vorlage (engl. template) schon im HTML-Dokument anzugeben und dann durch Javascript mittels appendChild() in den Elementenbaum einzuhängen.

• Web Components
  (Übersicht)
• Shadow DOM

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