Webcomponents - native Javscript Cheat Sheet

Vanilla Javascript: Das pure, reine Javascript im Gegensatz zu jQuery, Angular & Co. siehe https:­//w­iki.se­lfh­tml.or­g/w­iki­/Va­nil­la-JS
Vanilla JS Ein Javascript Framework
Webcom­ponents Spezielle, kleine, autonome auslie­ferbare Einheiten für Webseiten welche nach dem Webkom­pon­ent­ens­tandard des W3C erstellt wurden. Sie können sowohl mit als auch ohne Frameworks erstellt und bereit­ges­tellt werden. Sie basieren auf der Verwendung folgender Standards:

The Custom Elements specif­ication
The shadow DOM specif­ication
The HTML Template specif­ication
The ES Module specif­ication

Shadow DOM Wird an der Stelle der Webkom­ponente eingeh­ängt. Meine Vorste­llung davon. Der normale DOM ist ein 2D Baum und da wo unsere Komponente eingehängt ist wird ein neuer Baum dran gehängt der nach hinten geht - es wird also ein 3D Baum :)
Der Shadow DOM kann als offen oder geschl­ossen definiert werden.
Closed Shadow DOM
Kein externes Javascript (also was nicht Teil der Komponente ist) kann auf Elemente des Shadow DOM der Komponente zugreifen. Damit funkti­onieren diverse Testfr­ame­works nicht bei Webkom­pon­enten. Die Lösung ist: offener Shadow DOM :) Das video Tag wurde per Closed Shadow DOM realis­iert.
Open Shadow DOM
Hier kann externes Javascript auf Elemente des Shadow DOM zugreifen. Daher lassen sich dann Webkom­pon­enten testen. Daher ist das aktuell üblich.

Light DOM Ist alles was nicht Shadow DOM ist.

Property Eine Eigens­chaft die über Javascript gesetzt wird. Erkennbar daran, dass get und set Defini­tionen in der Komponente vorliegen.
Attribute Eine per HTML definierte Eigens­chaft. Eignet sich nur zur Übergabe von String, Number oder Boolean Werten.

Gold Standard of Webcom­ponents:
https:­//g­ith­ub.c­om­/we­bco­mpo­nen­ts/­gol­d-s­tan­dar­d/wiki
Eine lebende Checkliste mit der man prüfen kann ob die entwic­kelte Webcom­ponente eine gute Qualität besitzt.

https:­//d­ev.t­o/­the­pas­sle­/we­b-c­omp­one­nts­-fr­om-­zer­o-t­o-h­ero­-4n­4m#­-se­tti­ng-­pro­perties
https:­//d­ev.t­o/­ben­nyp­owe­rs/­let­s-b­uil­d-w­eb-­com­pon­ent­s-p­art­-3-­van­ill­a-c­omp­one­nts­-4on3

Eine Komponente besteht aus Javascript (Verha­lten), HTML Template (Struktur) und CSS (Style).

Aufteilung auf mehrere Dateien
Rein theore­tisch kann man jede Sprache in einer eigener Datei realis­ieren. In der Praxis habe ich es nicht hinbek­ommen die Komponente dann zu laden - da bräuchte es irgend­einen Loader oder so. Es ginge wenn die HTML Imports Spezif­ikation durchg­ekommen wäre aber leider hat die Bereit­ste­llung einer Webkom­ponente über mehrere Dateien, ohne Frameworks nur für kurze Zeit funkti­oniert: https:­//w­ww.c­hr­ome­sta­tus.co­m/f­eat­ure­/51­447­523­453­17376 -> Die HTML Imports Spezif­ikation gilt als deprecated und wird von den Browse­rhe­rst­ellern nicht weiter unters­tützt.

Single File Webcom­ponents
Webkom­pon­enten, welche als einzelne Datei realisiert werden, funkti­onieren aktuell ganz gut. Hat den Vorteil, dass die Komponente auch klein genug bleiben muss, sonst blickt man nicht mehr durch. Eine Art natürl­icher, fachlicher Schnitt ;)

custom­Ele­men­ts.r­eg­ist­erE­lement -> deprecated -> use custom­Ele­men­ts.d­ef­ine­('ta­g-n­ame­', ClassName)

this.c­rea­teS­had­owRoot -> deprecated -> use var shadowroot = elemen­t.a­tta­chS­had­ow(­sha­dow­Roo­tInit);

this.s­had­owRoot -> vererbte Variable in welcher der ShadowDom gespei­chert ist

Per Property: z.B. el.data = myObj;
Per Attribute: z.B. <my-el data="[­{a:­1},­{a:­2}....]­"><­/my­-el>
Per Kindel­emente: analog zu selection und options
Per URL fetch: analog zum src von img

Versuch per Constr­uktor Parameter auszulesen
Das geht schief wenn unsere Webkom­ponente durch Javascript erst in den DOM eingehängt wird. Der Grund ist, dass es beim Erstellen noch keine Verbindung zum DOM und damit auch keine Attribute, parent nodes oder childs gibt.
Das wird klappen wenn Du die Komponente bereits im DOM per HTML definiert hast. Üblich­erweise wird hier in der Hostseite ein <te­mpl­ate> Tag definiert und dieses im Konstr­uktur der Webcom­ponente dann per jQuery gesucht.

Properties werden per Javascript verändert und in der Komponente müssen getter und setter existieren
Attribute werden per HTML definiert und es können nur Werte vom Typ String, Number und Boolean übergeben werden.

Folgende Dinge sind beim Styling zu beachten:

* Display der Komponente ist immer inline wodurch sich Höhe und Breite standa­rdmäßig nicht setzen lassen. Über die Pseudo­klasse :host einen Style z.B. flex zuweisen und es geht.