Skip to content

Instantly share code, notes, and snippets.

Last active October 5, 2017 22:38
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Introduction to Web Components & Polymer Workshop

Introduction to Web Components & Polymer Workshop

Little Rock Tech Fest 2017

Hello! 👋

Thanks for coming to our hands-on introduction to Web Components & Polymer! If you stumbled onto this and weren't at the event, hopefully this is still of somewhat use :-)

This is all the materials that were required to get started:

  1. Install Git
  2. Install Node and npm (If you'd like to manage multiple version of Node, we recommend nvm)
  3. Install Bower & the Polymer CLI globally: $ npm install -g bower polymer-cli
  4. Clone the Polymer Google Maps Codelab ($ git clone
  5. Install the dependencies for that project by running $ bower install from the directory you cloned polymer-maps into
  6. Clone the Build a Polymer 2.0 App From Scratch Codelab ($ git clone
  7. Install the dependencies for that project by running $ bower install from the directory you cloned polymer-whose-flag into
  8. Obtain a Google Maps API key and record that somewhere it will be easy to copy from so you can paste it into your code during the workshop :-)

Cloud9 Users

If you use Cloud9, clone the repo at and create a workspace from that git fork.


Slides are available to view & download at


Please reach out to us on Twitter, we're happy to help :-)

John & Chris

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Web Components Demo</title>
@import url(,700&subset=latin,latin-ext);
body {
font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
<link href="//" rel="stylesheet">
<template id="lrtf-speaker">
:host {
display: block;
text-align: center;
-webkit-font-smoothing: antialiased;
contain: content; /* see */
/* all: initial; */
/* Note regading `all: initial`: not going to use it here, but good to know about
the ability to set it to prevent inheritable styles (background, color, font,
line-height, etc.) from being inherited in the Shadow DOM. */
a {
text-decoration: none;
color: #63a145;
.photo-wrapper {
border-radius: 50%;
overflow: hidden;
margin: 0 auto 20px;
display: inline-block;
max-width: 100%;
::slotted(img) {
display: block;
max-width: 100%;
width: 200px;
height: auto;
::slotted(h3) {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
line-height: 14px;
letter-spacing: 0.3em;
margin: 0 0 10px;
padding: 0;
a:hover ::slotted(h3) {
text-decoration: underline;
::slotted(p) {
color: #8d93a0;
margin: 0 0 10px;
padding: 0;
line-height: 29px;
font-size: 14px;
.speaker-socials {
margin: 0;
padding: 0;
list-style-type: none;
.speaker-socials > li {
padding: 0 10px;
margin: 0;
display: inline-block;
text-align: center;
.fa {
box-sizing: border-box;
display: inline-block;
width: 30px;
height: 30px;
line-height: 27px;
border-radius: 50%;
border: 2px solid#e9e9e9;
transition: color 0.2s ease, background 0.2s ease, border 0.2s ease;
font-family: FontAwesome;
font-size: inherit;
text-rendering: auto;
transform: translate(0, 0);
a:hover .fa {
color: #fff;
background-color: #63a145;
border-color: #63a145;
.speaker-socials span {
/* visually hidden, but read by screen readers */
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(1px 1px, 1px 1px, 1px 1px, 1px 1px);
.twitter:before {
content: "\f099";
.website:before {
content: "\f0ac";
class LrtfSpeaker extends HTMLElement {
constructor() {
super(); // always call super() first in the constructor
window.customElements.define('lrtf-speaker', LrtfSpeaker);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment