Useful resources



Instant Loading Web Apps with An Application Shell Architecture this article describes the application shell

Progressive Web Apps

What is a Service Worker


PRPL pattern

Service Worker Precache

Service Worker resources

The offline cookbook this is useful when working with Service Worker Precache  to provide the best experience for your users. Service worker lifecycle is explained in the second chapter of the udacity course Offline Web Applications which explains how to use IndexedDB & Service Worker

Responsive app layout explains some basic components drawers, toolbar, headers and esponsive navigation pattern

Polymer App Toolbox


polymer-admin this is build with gulp. needs some work to change to polymer-cli

Built with Polymer Sample of websites built with polymer

Shop case study



Polymer Starter Kit

Polymer CLI is like a cheatsheet for commands

Polymer Designer

Google chrome lighthouse

Advanced tools


lazy imports

PolymerLabs/IMD Use IMD to manipulate HTML Imports

ex. doesn’t need to load both components

	} else {

Atom tools

Polymer Snippets for Atom

polymer-atom linter Polylint in Atom is slow. A lot … Use polymer-ide instead.



visualstudio with polymer ide


Polymer Catalog - elements

app-layout A collection of elements, along with guidelines and templates that can be used to structure your app’s layout. demo

iron-pages is used to select one of its children to show. One use is to cycle through a list of children “pages”.

iron-list  displays a virtual, ‘infinite’ list. The template inside the iron-list element represents the DOM to create for each list item. The items property specifies an array of list item data.

iron-icons is a utility import that includes the definition for the iron-icon element, iron-iconset-svg element, as well as an import for the default icon set.

iron-icon displays an icon. By default an icon renders as a 24px square.


iron-media-query  can be used to data bind to a CSS media query.

dom-if stamps the template iff the if property is truthy. When if becomes falsey, the stamped content is hidden but not removed from dom. 

iron-ajax element exposes network request functionality.

iron-meta this might be the solution to global variables

Custom elements




Saulis/iron-data-table iron-data-table is a Web Component for displaying data as a table or grid. Built on top of iron-list using Polymer. This seems to be the only element that works well with iron-ajax

material-components Material components use Materialize.css and Vue.js to build UI . nice ui library but version alpha

robdodson/chart-elements See the component page for more information.

lazyload-image HTMLImageElement extension for lazy loading. Images will be loaded when they are shown.

addyosmani/x-imager A Polymer element for responsive images with Imager.js

rcaferati/awesome-button The awesome-button Vanilla JS custom element web component is a cool option to quickly add share buttons (or any kind of buttons) to your projects.

Zecat/paper-stepper Paper-stepper is an element made with Polymer to easily create a stepper with respect to the material specification.

kzima/vuestrap-icons Vuestrap Icons Component complements vuestrap web components with svg icons. SVG sprite consists of 223 icons from Iconic — www.useiconic.com/open plus two custom ones: circle-fill and circle-outline

hejty/social-media-icons A Polymer element with a set of scalable social media icons

x-tag/modal A modal is a UI component that pops up when specified, covering its parent element until it is dismissed.

oxygen-language is an element that determines the best match between a browser’s preferred language(s), and an application’s supported languages. It can be used to help internationalize your application.

Contactlab Pattern Library

Web components


web-component-tester-istanbul coverage plugin for web-component-tester.

wct-structured-data-testing Test web component’s structured data

Testing resources

Testing in official documentation

Unit Testing with Web Component Tester – Polycasts #36

Testing AJAX with Web Component Tester – Polycasts #37

Browser testing with Travis & Sauce Labs – Polycasts #38

Testing Polymer Web Components (The Polymer Summit 2015)


Polymer Themes

material palette

Polymer Admin Template

Polymer Admin Starter Template


The Polymer Summit 2015 MUST, this series gives the most thorough insight and best tips.

Introducing the Polymer Designer tool explains designer tool

Polymer Summit Codelabs exercises from the summit

Build a Real-Time Polymer To-Do App

Play Framework with REST, ReactiveMongo and Polymer - code



Sample Projects

chat-view : example from Polymer Summit 2016

polymer-summit-example-component An example of a simple product component to show some design and test principles.

polymer-summit-example-application An example of a simple product list application to show some design and test principles.