![\"\"](\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_SPA-600x319.png\")
In dieser Artikelreihe<\/a> soll es um diese und weitere Aspekte beim Zusammenspiel von Web Components und SPA-Frameworks, insbesondere React<\/a>, gehen. Im ersten Teil der Reihe liegt der Fokus aber zun\u00e4chst nur auf Web Components, was sich hinter dem Begriff verbirgt und wie man Web Components baut.<\/p>\n\n\n\n Hinter dem Begriff „Web Components“ verbergen sich mehrere separate HTML-Spezifikationen, die verschiedene Aspekte beim Entwickeln eigener Komponenten behandeln. Es gibt also nicht „den einen“ Standard f\u00fcr Web Components, sondern es handelt sich um eine Kombination von mehreren Spezifikationen<\/a>.<\/p>\n\n\n\n Die beiden wichtigsten sind „Custom Elements“ und „Shadow DOM“. Die Custom-Elements-Spezifikation beschreibt u. a. die JavaScript-Basis-Klasse „HTMLElement“, von welcher eigene Komponenten abgeleitet werden m\u00fcssen. Diese Klasse stellt zahlreiche Lifecycle-Methoden bereit, mit denen auf diverse Ereignisse im Lebenszyklus der Komponente reagiert werden kann. Beispielsweise l\u00e4sst sich programmatisch darauf reagieren, dass die Komponente in einem Dokument eingehangen oder Attribute der Komponente gesetzt wurden. Entwickler und Entwicklerinnen einer Komponente k\u00f6nnen daraufhin die Darstellung der Komponente aktualisieren. Au\u00dferdem geh\u00f6rt zu Custom Elements die M\u00f6glichkeit, eigene Komponenten-Klassen unter einem bestimmten HTML-Tag zu registrieren, damit die Komponente anschlie\u00dfend im gesamten Dokument zur Verf\u00fcgung steht.<\/p>\n\n\n\n Hinter „Shadow-DOM“ verbirgt sich eine Technik, mit der f\u00fcr eine Komponente ein eigener DOM-Baum angelegt werden kann, der vom restlichen Dokument weitestgehend isoliert ist. Das bedeutet, dass zum Beispiel CSS-Eigenschaften, die global im Dokument gesetzt wurden, nicht im Shadow-DOM wirksam sind und in die andere Richtung auch CSS-Definitionen innerhalb einer Komponente keine Auswirkungen auf sonstige Elemente im Dokument haben. Das Ziel ist eine bessere Kapselung der Komponenten und die Vermeidung von unerw\u00fcnschten Seiteneffekten beim Einbinden von fremden Webkomponenten.<\/p>\n\n\n\n Im folgenden Code-Block ist eine einfache Hallo-Welt-Komponente zu sehen, die ein Property f\u00fcr den Namen der zu gr\u00fc\u00dfenden Person enth\u00e4lt.<\/p>\n\n\n\n Im Konstruktor der Komponente wird zun\u00e4chst f\u00fcr die Komponente ein eigener Shadow-DOM-Baum angelegt. Die Angabe „mode: open“ bewirkt, dass trotz der Shadow-DOM-Barriere von au\u00dfen mittels JavaScript auf den DOM-Baum der Komponente zugegriffen werden kann.<\/p>\n\n\n\n Anschlie\u00dfend wird der „shadowRoot“, also der Root-Knoten des Shadow-DOM, entsprechend unserer W\u00fcnsche gestaltet \u2013 hier mittels „innerHTML“.<\/p>\n\n\n\n Mit „observedAttributes“ erkl\u00e4ren wir, welche Attribute die Komponente haben soll bzw. bei welchen Attributen wir benachrichtigt werden m\u00f6chten (wir k\u00f6nnen hier also auch Standard-Attribute wie „class“ angeben).<\/p>\n\n\n\n Die Benachrichtigung findet \u00fcber die Methode „attributeChangedCallback“ statt, die als Parameter den Namen des ge\u00e4nderten Attributs sowie den alten und neuen Wert erh\u00e4lt. Da wir in unserem Fall nur ein einziges Attribut in „observedAttributes“ angegeben haben, w\u00e4re eine Pr\u00fcfung auf den Namen des Attributs eigentlich nicht notwendig. Bei mehreren Attributen muss aber stets geschaut werden, welches Attribut gerade ge\u00e4ndert wurde.<\/p>\n\n\n\n In unserem Fall pr\u00fcfen wir zun\u00e4chst, ob sich der neue Wert tats\u00e4chlich vom bisherigen unterscheidet (wir werden sp\u00e4ter noch sehen, wie das zustande kommen kann). Anschlie\u00dfend setzen wir die Property „person“, die wir als Klassenvariable angelegt haben, auf den Wert des \u00fcbergebenen Attributs.<\/p>\n\n\n\n Um die Darstellung der Komponente zu aktualisieren wurde im Beispiel die Methode „update“ angelegt. Diese geh\u00f6rt nicht zum Custom-Elements-Standard, sondern dient hier nur dazu, die Update-Logik an einer Stelle zu sammeln. Darin holen wir das zuvor angelegte Span-Element mit der ID „person“ aus dem Shadow-DOM und setzen dessen Text auf den Wert der „person“-Property.<\/p>\n\n\n\n Als letzten Schritt sieht man im Code-Beispiel, wie unsere Komponenten-Klasse mit dem Tag-Namen „app-hello-world“ registriert wird. Wichtig ist hier, dass der Name mindestens ein Minus-Zeichen enth\u00e4lt. Diese Regel wurde geschaffen, um m\u00f6gliche Namens-Kollisionen mit zuk\u00fcnftigen Standard-HTML-Tags zu vermeiden. Es hat sich daher als zweckm\u00e4\u00dfig erwiesen, ein sinnvolles Pr\u00e4fix f\u00fcr eigene Komponenten zu w\u00e4hlen, um so auch Kollisionen mit anderen Komponenten-Bibliotheken m\u00f6glichst zu vermeiden (das im Beispiel gew\u00e4hlte Pr\u00e4fix „app“ d\u00fcrfte in dieser Hinsicht kein gutes Vorbild sein). Ein wirklich sicherer Mechanismus zur Vermeidung von Konflikten existiert jedoch nicht.<\/p>\n\n\n\n Mittels Attribute haben wir nun also die M\u00f6glichkeit, einfache Daten in die Komponente hineinzureichen. Beim Thema „Attribute“ gibt es noch einige Besonderheiten und Fallstricke, die wir aber f\u00fcr den n\u00e4chsten Teil dieser Artikelreihe<\/a> aufheben wollen. F\u00fcr diese allgemeine Einf\u00fchrung wollen wir es erst einmal dabei belassen.<\/p>\n\n\n\n Ein weiteres wichtiges Feature von Web Components, welches uns ebenfalls in einem sp\u00e4teren Teil der Reihe nochmal besch\u00e4ftigen wird, sind die sogenannten Slots. Damit lassen sich HTML-Schnipsel an eine Komponente \u00fcbergeben. Die Komponente entscheidet dann, wie sie die \u00fcbergebenen Elemente darstellt. Wollen wir beispielsweise eine Hinweisbox bauen, die neben einem Text auch ein Icon darstellt und mit einem Rahmen umgibt, bietet es sich an, den Hinweistext nicht als Attribut, sondern mit einem Slot an die Komponente zu geben. Auf diese Weise sind wir nicht nur auf reinen Text beschr\u00e4nkt, sondern k\u00f6nnen beliebigen HTML-Content nutzen.<\/p>\n\n\n\n In der Anwendung kann das beispielsweise so aussehen:<\/p>\n\n\n\n Wir m\u00fcssen also nur die gew\u00fcnschten HTML-Tags als Kindelemente schreiben. Innerhalb der Komponente muss daf\u00fcr ein <slot>-Element im Shadow-Root auftauchen. Anstelle des Slot-Elements wird beim Rendering der Komponente dann der \u00fcbergebene Content angezeigt.<\/p>\n\n\n\n Eine Komponente kann auch mehrere Slots enthalten. Damit der Browser aber entscheiden kann, welche HTML-Elemente er welchem Slot zuordnen soll, m\u00fcssen in diesem Fall sogenannte „Named Slots“ benutzt werden, d. h. die Slots bekommen ein spezielles Name-Attribut. Nur h\u00f6chstens ein Slot darf innerhalb einer Komponente ohne Name-Attribut vorkommen. Bei diesem spricht man vom „Default Slot“. In der Komponente kann das z. B. so aussehen:<\/p>\n\n\n\n Die Benutzung k\u00f6nnte dann z. B. so aussehen:<\/p>\n\n\n\n Hier sieht man die Nutzung des „slot“-Attributs. Die Werte m\u00fcssen zu den „name“-Attributen an den Slots innerhalb der Komponente passen. Folglich geh\u00f6rt dies zum Teil der \u00f6ffentlichen API einer Komponente und muss entsprechend dokumentiert werden.<\/p>\n\n\n\n Bisher haben wir nur gesehen, wie Daten in Komponenten hineingereicht werden k\u00f6nnen, jedoch noch nicht den umgekehrten Weg skizziert. Denn um wirklich interaktiv zu sein, m\u00fcssen Entwickler und Entwicklerinnen auch die M\u00f6glichkeit haben, auf bestimmte Ereignisse zu reagieren und Daten von der Komponente entgegenzunehmen.<\/p>\n\n\n\n F\u00fcr diesen Zweck dienen bei HTML Events. Und auch diesen Aspekt wollen wir uns in diesem Artikel nur kurz anschauen und sp\u00e4ter genauer unter die Lupe nehmen.<\/p>\n\n\n\n Web Components k\u00f6nnen sowohl Standard Events als auch Custom Events erzeugen.<\/p>\n\n\n\n Standard-Events sind dann n\u00fctzlich, wenn die Art des Events so auch schon bei Standard-HTML-Elementen vorkommt und daher nicht neu erfunden werden muss, beispielsweise ein KeyboardEvent<\/a>. Custom-Events sind dann sinnvoll, wenn zus\u00e4tzliche Daten als Payload dem Event mitgegeben werden sollen. Wenn wir beispielsweise eine eigene interaktive Tabellenkomponente bauen, in der die Nutzenden einzelne Zeilen selektieren k\u00f6nnen, bietet es sich m\u00f6glicherweise an, ein Event bei der Selektion auszul\u00f6sen , welches als Payload die Daten der gew\u00e4hlten Zeile enth\u00e4lt.<\/p>\n\n\n\n Der Mechanismus zum Ausl\u00f6sen von Events ist f\u00fcr alle Arten von Events gleich. Dies ist im folgenden Code-Block zu sehen:<\/p>\n\n\n\n Zur Erzeugung eines Events wird entweder direkt eine Instanz von „Event“ oder eine der anderen Event-Klassen<\/a> (zu denen auch „CustomEvent“ geh\u00f6rt) erzeugt. Alle Event-Konstruktoren erwarten als ersten Parameter den Type des Events. Dieser Typ wird sp\u00e4ter auch benutzt, um Listener f\u00fcr diese Events zu registrieren.<\/p>\n\n\n\n Der zweite Parameter ist optional und stellt ein JavaScript-Objekt dar, welches das Event konfiguriert. F\u00fcr CustomEvent ist beispielsweise das Feld „detail“ vorgesehen, um beliebige Payload-Daten zu \u00fcbergeben.<\/p>\n\n\n\nWas sind Web Components und wie baut man eigene Komponenten?<\/h2>\n\n\n\n
class HelloWorld extends HTMLElement {\n\n person = \"\"\n\n constructor() {\n super();\n\n this.attachShadow({mode: \"open\"})\n\n this.shadowRoot.innerHTML = `\n <div>\n <p>Hello <span id=\"personGreeting\"><\/span><\/p>\n <\/div>\n `\n }\n\n static get observedAttributes() {\n return ['person']\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if(name === \"person\") {\n if(this.person !== newValue) {\n this.person = newValue\n this.update()\n }\n }\n }\n\n update() {\n this.shadowRoot.querySelector(\"#personGreeting\").textContent = this.person\n }\n\n}\nwindow.customElements.define(\"app-hello-world\", HelloWorld)<\/pre>\n\n\n\n![\"\"](\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_Shadow_DOM-600x424.png\")
Slots<\/h2>\n\n\n\n
<app-notification-box>\n\t<p>Some Text with additional <strong>tags<\/strong><\/p>\n<\/app-notification-box><\/pre>\n\n\n\n
<div>\n <div>Icon<\/div>\n <div id=\"content\">\n <slot><\/slot>\n <\/div>\n<\/div><\/pre>\n\n\n\n
<div>\n <div id=\"header\">\n <h1>\n <slot name=\"header\"><\/slot>\n <\/h1>\n <\/div>\n <div id=\"icon\">\n <slot name=\"icon\"><\/slot>\n <\/div>\n <div id=\"content\">\n <slot><slot>\n <\/div>\n<\/div><\/pre>\n\n\n\n
<app-notification-box>\n <p>Some Content<\/p>\n <span slot=\"header\">A meaningful Header<\/span>\n <img slot=\"icon\" src=\"...\" alt=\"notification icon\"\/>\n<\/app-notification-box><\/pre>\n\n\n\n
Events<\/h2>\n\n\n\n
class InteractiveComponent extends HTMLElement {\n\n triggerStandardEvent() {\n const event = new Event(\"close\")\n this.dispatchEvent(event)\n }\n\n triggerCustomEvent() {\n const event = new CustomEvent(\"some-reason\", \n { detail: { someData: \"...\" }}\n )\n this.dispatchEvent(event)\n }\n}<\/pre>\n\n\n\n