\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{Jonathan Beri (jonathanberi)}
\pdfinfo{
  /Title (polymer-js.pdf)
  /Creator (Cheatography)
  /Author (Jonathan Beri (jonathanberi))
  /Subject (Polymer.js 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}{E90974}
\definecolor{LightBackground}{HTML}{FDEFF6}
\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{Polymer.js Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{Jonathan Beri (jonathanberi)} via \textcolor{DarkBackground}{\uline{cheatography.com/10955/cs/1315/}}}
\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}Jonathan Beri (jonathanberi) \\
  \uline{cheatography.com/jonathanberi} \\
        \uline{\seqsplit{www}.jonathanberi.com}
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Published 20th October, 2013.\\
   Updated 11th May, 2016.\\
   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*}{3}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Using elements}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\textless{}script src="platform.js"\textgreater{}\textless{}/script\textgreater{}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Load the polyfills} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\textless{}link rel="import" href="x-foo.html"\textgreater{}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Import components used on the page} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\textless{}x-foo\textgreater{}\textless{}/x-foo\textgreater{}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Declare the component by its tag} \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\textless{}x-foo attr color="blue"\textgreater{}\textless{}/x-foo\textgreater{}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Published properties as attributes} \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\textless{}x-foo\textgreater{}My foo\textless{}/x-foo\textgreater{}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}{\emph{My foo}} is part of the light dom} \tn 
% Row Count 10 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\textless{}x-foo\textgreater{}\textless{}x-bar\textgreater{}\textless{}/x-bar\textgreater{}\textless{}/x-foo\textgreater{}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Composing elements. {\emph{\textless{}x-bar\textgreater{}}}  is part of the light dom} \tn 
% Row Count 13 (+ 3)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{document.querySelector('x-foo').customMethod();}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Accessing methods} \tn 
% Row Count 16 (+ 3)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{document.querySelector('x-foo').color = 'red';}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Accessing properties} \tn 
% Row Count 18 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{window.addEventListener('polymer-ready', function(e) \{ \seqsplit{document.querySelector('x-foo').barProperty} = 'baz';\});}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Wait for the 'polymer-ready' event before interacting with the element} \tn 
% Row Count 23 (+ 5)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Element declaration}}  \tn
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}polymer-element name="tag-name" constructor="TagName"\textgreater{} \newline % Row Count 2 (+ 2)
  \textless{}template\textgreater{} \newline % Row Count 3 (+ 1)
    \textless{}!-{}- shadow DOM here -{}-\textgreater{} \newline % Row Count 4 (+ 1)
  \textless{}/template\textgreater{}  \newline % Row Count 5 (+ 1)
  \textless{}script\textgreater{} \newline % Row Count 6 (+ 1)
    Polymer('tag-name'); \newline % Row Count 7 (+ 1)
  \textless{}/script\textgreater{} \newline % Row Count 8 (+ 1)
\textless{}/polymer-element\textgreater{}% Row Count 9 (+ 1)
} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Element lifecycle methods}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{created()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}an instance of the element is created} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{ready()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The \textless{}polymer-element\textgreater{} has been fully prepared (e.g. Shadow DOM created, property observers setup, event listeners attached, etc.)} \tn 
% Row Count 6 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{attached()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}an instance was inserted into the document} \tn 
% Row Count 8 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{domReady()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Called when the element's initial set of children are guaranteed to exist. (after {\bf{attached()}})} \tn 
% Row Count 12 (+ 4)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{detached()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}an instance was removed from the document} \tn 
% Row Count 14 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{attributeChanged()}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}an attribute was added, removed, or updated} \tn 
% Row Count 16 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{Polymer('tag-name', \{ \newline ... \newline \});}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Expressions}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{foo, foo.bar.baz} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Identifiers \& paths. These values are treated as relative to the local model, extracted, observed for changes and cause the expression to be re-evaluated if one or more has changed.} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{!} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Logical not operator} \tn 
% Row Count 7 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{+foo, -bar} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Converted to Number. Or converted to Number, then negated.} \tn 
% Row Count 10 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{foo + bar, foo - bar, foo * bar} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Supported: \textless{}, \textgreater{}, \textless{}=, \textgreater{}=, ==, !=, ===, !==} \tn 
% Row Count 12 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{foo \&\& bar || baz} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Logical comparators} \tn 
% Row Count 14 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{a ? b : c} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Ternary operator} \tn 
% Row Count 16 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{(a + b) * (c + d)} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Grouping (parenthesis)} \tn 
% Row Count 18 (+ 2)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{numbers, strings, null, undefined} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Literal values. Escaped strings and non-decimal numbers are not supported.} \tn 
% Row Count 21 (+ 3)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{[}foo, 1{]}, \{id: 1, foo: bar\}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Array \& Object initializers} \tn 
% Row Count 23 (+ 2)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{foo: bar.baz; bat: boo \textgreater{} 2;} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Labeled statements} \tn 
% Row Count 25 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Firing custom events}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{this.fire('ouch', \{msg: 'That hurt!'\});} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}// fire(inType, inDetail, inToNode)} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\seqsplit{document.querySelector('ouch-button').addEventListener('ouch'}, function(e) \{     console.log(e.type, e.detail.msg); // "ouch" "That hurt!"   \});} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Listening outside the element} \tn 
% Row Count 6 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}ouch-button on-ouch="\{\{ myMethod \}\}"\textgreater{}\textless{}/ouch-button\textgreater{}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Using on-* handlers within another Polymer element} \tn 
% Row Count 10 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Change watcher}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{propertyNameChanged} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}When the value of a watched property changes, the appropriate change handler is automatically invoked.} \tn 
% Row Count 4 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}polymer-element name="g-cool" attributes="better best"\textgreater{} \newline   \textless{}script\textgreater{} \newline     Polymer('g-cool', \{ \newline       betterChanged: function(inOldValue) \{ \newline       \}, \newline       bestChanged: function(inOldValue) \{ \newline       \} \newline     \}); \newline   \textless{}/script\textgreater{} \newline \textless{}/polymer-element\textgreater{}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Event mapping}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}template\textgreater{}\textless{}input on-keypress="\{\{ keypressHandler \}\}"\textgreater{}\textless{}/input\textgreater{}\textless{}/template\textgreater{}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}on-keypress declaration maps the standard DOM "keypress" event to the keypressHandler method defined on the element} \tn 
% Row Count 5 (+ 5)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{buttonClick: function(event, detail, sender) \{ ... \}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}on-* handler} \tn 
% Row Count 8 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\emph{event}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}inEvent is the standard event object.} \tn 
% Row Count 10 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\emph{detail}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}inDetail: A convenience form of inEvent.detail.} \tn 
% Row Count 12 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\emph{sender}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}A reference to the node that declared the handler. This is often different from inEvent.target (the lowest node that received the event) and inEvent.currentTarget (the component processing the event), so Polymer provides it directly.} \tn 
% Row Count 18 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\columnbreak
\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Element attributes}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\textless{}polymer-element name="tag-name"\textgreater{}\textless{}polymer-element\textgreater{}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Name for the custom element. Requires a "-".} \tn 
% Row Count 3 (+ 3)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\textless{}polymer-element attributes="color"\textgreater{}\textless{}polymer-element\textgreater{}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Published properties} \tn 
% Row Count 6 (+ 3)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\textless{}polymer-element extends="other-element"\textgreater{}\textless{}polymer-element\textgreater{}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Extend other elements} \tn 
% Row Count 9 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\textless{}polymer-element noscript\textgreater{}\textless{}polymer-element\textgreater{}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}For simple elements that don't need to call Polymer().} \tn 
% Row Count 12 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\textless{}polymer-element lightdom\textgreater{}\textless{}polymer-element\textgreater{}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}For simpler elements that don't require the features of Shadow DOM, use the lightdom attribute to control how the element stamps out DOM.} \tn 
% Row Count 16 (+ 4)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{{\bf{\textless{}polymer-element constructor="TagName\textgreater{}\textless{}polymer-element\textgreater{}}}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}The name of the constructor to put on the global object. Allows users to create instances of your element using the new operator (e.g. var tagName = new TagName()).} \tn 
% Row Count 22 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Automatic node finding}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{this.\$.nameInput.value} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}\textless{}template\textgreater{}\textless{}input type="text" id="nameInput"\textgreater{}\textless{}/template\textgreater{}} \tn 
% Row Count 3 (+ 3)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Extending elements}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}polymer-element name="p-el" extends="p-2"\textgreater{}\textless{}/polymer-element\textgreater{}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}A Polymer element can extend another element by using the extends attribute. The parent's properties and methods are inherited by the child element and data-bound. You can override any attribute or method} \tn 
% Row Count 7 (+ 7)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{this.super();} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Calls the parent's method} \tn 
% Row Count 9 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}link rel="import" href="x-foo.html"\textgreater{}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Import the file with the extended element if not in the same file} \tn 
% Row Count 13 (+ 4)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{5.377cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{Template syntax}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}template\textgreater{}\{\{ owner \}\}\textless{}/template\textgreater{}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}You can bind properties in your component using declarative data binding and the "double-mustache" syntax (\{\{\}\}).} \tn 
% Row Count 4 (+ 4)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}template repeat="\{\{ user,i in users \}\}"\textgreater{}\textless{}/template\textgreater{}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}repeats one instance for each item in the array 'users'} \tn 
% Row Count 8 (+ 4)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}template bind="\{\{ foo as bar \}\}"\textgreater{}\textless{}/template\textgreater{}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Named scopes are useful for referencing a model value from an "outer" model "scope".} \tn 
% Row Count 11 (+ 3)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}template if="\{\{ conditionalValue \}\}"\textgreater{}\textless{}/template\textgreater{}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Binds if and only if conditionalValue is truthy.} \tn 
% Row Count 14 (+ 3)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}template repeat if="\{\{ conditionalValue \}\}"\textgreater{}\textless{}/template\textgreater{}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}Repeat if and only if conditionalValue is truthy.} \tn 
% Row Count 18 (+ 4)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}template bind ref="myTemplate"\textgreater{}\textless{}/template\textgreater{}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}When creating an instance, the content of this template will be ignored,   and the content of \#myTemplate is used instead.} \tn 
% Row Count 22 (+ 4)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}content select="h2"\textgreater{}\textless{}/content\textgreater{}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}When a tag is rendered, the content of the shadow host is projected into the spot that the \textless{}content\textgreater{} element appears.} \tn 
% Row Count 26 (+ 4)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{5.377cm}}{\textless{}input type="text" value="this value is inserted once: {[}{[} obj.value {]}{]}"\textgreater{}} \tn 
\mymulticolumn{1}{x{5.377cm}}{\hspace*{6 px}\rule{2px}{6px}\hspace*{6 px}double brackets ({[}{[}{]}{]}) be used in place of \{\{\}\}\} to setup a one-time binding. The binding becomes inactive after Polymer sets its value for the first time.} \tn 
% Row Count 32 (+ 6)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{5.377cm}}{\textless{}polymer-element name="tk-element-databinding"\textgreater{} \newline   \textless{}template\textgreater{}\{\{owner\}\}\textless{}/strong\textgreater{}\textless{}/template\textgreater{} \newline   \textless{}script\textgreater{} \newline     \seqsplit{Polymer('tk-element-databinding'}, \{ \newline       owner: 'Daniel', \newline       users: {[}1,2,3{]} \newline     \}); \newline   \textless{}/script\textgreater{} \newline \textless{}/polymer-element\textgreater{}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


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

\end{document}