\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{Huluvu424242 (FunThomas424242)}
\pdfinfo{
  /Title (webcomponents-native-javscript.pdf)
  /Creator (Cheatography)
  /Author (Huluvu424242 (FunThomas424242))
  /Subject (Webcomponents - native Javscript Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{A3A3A3}
\definecolor{LightBackground}{HTML}{F3F3F3}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Webcomponents - native Javscript Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Huluvu424242 (FunThomas424242)} via \textcolor{DarkBackground}{\uline{cheatography.com/19991/cs/20426/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}Huluvu424242 (FunThomas424242) \\
  \uline{cheatography.com/funthomas424242} \\
        \uline{\seqsplit{github}.com/Huluvu424242}
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 29th August, 2019.\\
   Updated 7th September, 2019.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Grundbegriffe}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Vanilla Javascript}}: Das pure, reine Javascript im Gegensatz zu jQuery, Angular \& Co. siehe \seqsplit{https://wiki.selfhtml.org/wiki/Vanilla-JS} \newline % Row Count 3 (+ 3)
{\bf{Vanilla JS}} Ein Javascript Framework  \newline % Row Count 4 (+ 1)
{\bf{Webcomponents}} Spezielle, kleine, autonome auslieferbare Einheiten für Webseiten welche nach dem Webkomponentenstandard des W3C erstellt wurden. Sie k{\"o}nnen sowohl mit als auch ohne Frameworks erstellt und bereitgestellt werden. Sie basieren auf der Verwendung folgender Standards: \newline % Row Count 10 (+ 6)
* The Custom Elements specification \newline % Row Count 11 (+ 1)
* The shadow DOM specification \newline % Row Count 12 (+ 1)
* The HTML Template specification \newline % Row Count 13 (+ 1)
* The ES Module specification \newline % Row Count 14 (+ 1)
{\bf{Shadow DOM}} Wird an der Stelle der Webkomponente eingeh{\"a}ngt. Meine Vorstellung davon. Der normale DOM ist ein 2D Baum und da wo unsere Komponente eingeh{\"a}ngt ist wird ein neuer Baum dran geh{\"a}ngt der nach hinten geht - es wird also ein 3D Baum :) \newline % Row Count 20 (+ 6)
Der Shadow DOM kann als offen oder geschlossen definiert werden.  \newline % Row Count 22 (+ 2)
{\bf{Closed Shadow DOM}} \newline % Row Count 23 (+ 1)
Kein externes Javascript (also was nicht Teil der Komponente ist)  kann auf Elemente des Shadow DOM der Komponente zugreifen. Damit funktionieren diverse Testframeworks nicht bei Webkomponenten. Die L{\"o}sung ist: offener Shadow DOM :) Das video Tag wurde per Closed Shadow DOM realisiert.  \newline % Row Count 29 (+ 6)
{\bf{Open Shadow DOM}} \newline % Row Count 30 (+ 1)
} \tn 
\end{tabularx}
\par\addvspace{1.3em}

\vfill
\columnbreak
\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Grundbegriffe (cont)}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Hier kann externes Javascript auf Elemente des Shadow DOM zugreifen. Daher lassen sich dann Webkomponenten testen. Daher ist das aktuell üblich.  \newline % Row Count 3 (+ 3)
{\bf{Light DOM}} Ist alles was nicht Shadow DOM ist. \newline % Row Count 4 (+ 1)
{\bf{Property}} Eine Eigenschaft die über Javascript gesetzt wird. Erkennbar daran, dass get und set Definitionen in der Komponente vorliegen.  \newline % Row Count 7 (+ 3)
{\bf{Attribute}} Eine per HTML definierte Eigenschaft. Eignet sich nur zur Übergabe von String, Number oder Boolean Werten.  \newline % Row Count 10 (+ 3)
{\bf{Gold Standard of Webcomponents}}: \newline % Row Count 11 (+ 1)
\seqsplit{https://github.com/webcomponents/gold-standard/wiki} \newline % Row Count 13 (+ 2)
Eine lebende Checkliste mit der man prüfen kann ob die entwickelte Webcomponente eine gute Qualit{\"a}t besitzt.% Row Count 16 (+ 3)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Quellen: \newline {\emph{ \seqsplit{https://www.webcomponents.org/specs} \newline }} \seqsplit{https://dev.to/thepassle/web-components-from-zero-to-hero-4n4m\#-setting-properties}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Vanilla WebComponents Tutorials}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{* \seqsplit{https://dev.to/thepassle/web-components-from-zero-to-hero-4n4m\#-setting-properties} \newline % Row Count 2 (+ 2)
* \seqsplit{https://dev.to/bennypowers/lets-build-web-components-part-3-vanilla-components-4on3}% Row Count 4 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Projektstruktur}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Eine Komponente besteht aus Javascript (Verhalten), HTML Template (Struktur) und CSS (Style). \newline % Row Count 2 (+ 2)
{\bf{Aufteilung auf mehrere Dateien}} \newline % Row Count 3 (+ 1)
Rein theoretisch kann man jede Sprache in einer eigener Datei realisieren. In der Praxis habe ich es nicht hinbekommen die Komponente dann zu laden - da br{\"a}uchte es irgendeinen Loader oder so. Es ginge wenn die HTML Imports Spezifikation durchgekommen w{\"a}re aber leider hat die Bereitstellung einer Webkomponente über mehrere Dateien, ohne Frameworks nur für kurze Zeit funktioniert: \seqsplit{https://www.chromestatus.com/feature/5144752345317376} -\textgreater{} Die HTML Imports Spezifikation gilt als deprecated und wird von den Browserherstellern nicht weiter unterstützt. \newline % Row Count 15 (+ 12)
{\bf{Single File Webcomponents}} \newline % Row Count 16 (+ 1)
Webkomponenten, welche als einzelne Datei realisiert werden, funktionieren aktuell ganz gut. Hat den Vorteil, dass die Komponente auch klein genug bleiben muss, sonst blickt man nicht mehr durch. Eine Art natürlicher, fachlicher Schnitt ;)% Row Count 21 (+ 5)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Quelle: \seqsplit{https://www.chromestatus.com/feature/5144752345317376}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Webcomponents - API}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{\seqsplit{customElements.registerElement} -\textgreater{} deprecated -\textgreater{} use \seqsplit{customElements.define('tag-name'}, ClassName) \newline % Row Count 2 (+ 2)
this.createShadowRoot -\textgreater{} deprecated -\textgreater{} use var shadowroot = \seqsplit{element.attachShadow(shadowRootInit);} \newline % Row Count 4 (+ 2)
this.shadowRoot -\textgreater{} vererbte Variable in welcher der ShadowDom gespeichert ist% Row Count 6 (+ 2)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Parameterübergabe}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{* Per Property: z.B.  el.data = myObj; \newline % Row Count 1 (+ 1)
* Per Attribute: z.B. \textless{}my-el data="{[}\{a:1\},\{a:2\}....{]}"\textgreater{}\textless{}/my-el\textgreater{} \newline % Row Count 3 (+ 2)
* Per Kindelemente: analog zu selection und options \newline % Row Count 5 (+ 2)
* Per URL fetch: analog zum src von img \newline % Row Count 6 (+ 1)
Versuch per Construktor Parameter auszulesen \newline % Row Count 7 (+ 1)
* Das geht schief wenn unsere Webkomponente durch Javascript erst in den DOM eingeh{\"a}ngt wird. Der Grund ist, dass es beim Erstellen noch keine Verbindung zum DOM und damit auch keine Attribute, parent nodes oder childs gibt.  \newline % Row Count 12 (+ 5)
* Das wird klappen wenn Du die Komponente bereits im DOM per HTML definiert hast. Üblicherweise wird hier in der Hostseite ein \textless{}template\textgreater{} Tag definiert und dieses im Konstruktur der Webcomponente dann per jQuery gesucht.% Row Count 17 (+ 5)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Quelle: \seqsplit{https://stackoverflow.com/questions/50404970/web-components-pass-data-to-and-from}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Properties vs. Attribute}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{Properties}} werden per Javascript ver{\"a}ndert und in der Komponente müssen getter und setter existieren \newline % Row Count 3 (+ 3)
{\bf{Attribute}} werden per HTML definiert und es k{\"o}nnen nur Werte vom Typ String, Number und Boolean übergeben werden.% Row Count 6 (+ 3)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Quelle: \seqsplit{https://alligator.io/web-components/attributes-properties/}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ES Module}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Quelle: \seqsplit{https://flaviocopes.com/es-modules/}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Styling}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Folgende Dinge sind beim Styling zu beachten: \newline % Row Count 1 (+ 1)
* Display der Komponente  ist immer inline wodurch sich H{\"o}he und Breite standardm{\"a}{\ss}ig nicht setzen lassen. Über die Pseudoklasse :host einen Style z.B. flex zuweisen und es geht.% Row Count 5 (+ 4)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}