Web Components

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Web Components Logo

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.

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.[1][2]

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



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

  1. WHATWG: Web Components
  2. Die derzeit implementierte Version wird in Abgrenzung zu den experimentellen Versuchen der Jahre 2013-14 als Version 1 (v1) bezeichnet.