Google Polymer Web Components

Overview
Background
Key Concepts
Implementation
References
Notes

Overview

Polymer was a JavaScript library developed by Google (2013-2019) that pioneered Web Components development before native browser support matured. Built on the emerging Web Components standards (Custom Elements, Shadow DOM, HTML Templates, HTML Imports), Polymer provided polyfills and syntactic sugar for creating reusable, encapsulated UI components. The library evolved through three major versions before Google transitioned the project to LitElement (2018) and ultimately Lit (2021), which offers a lighter-weight, standards-based approach now that Web Components are natively supported across all major browsers.

Background

Created by Google Chrome team, announced at Google I/O 2013
Original goal: make Web Components usable before browser support existed
Polymer 0.5 (2014): Developer preview, heavy use of polyfills
Polymer 1.0 (2015): Production-ready, "shady DOM" for performance
Polymer 2.0 (2017): ES6 classes, hybrid elements for migration
Polymer 3.0 (2018): npm/ES modules, dropped HTML Imports and Bower
LitElement (2018): Lighter successor, ~5KB vs ~40KB
Lit 2.0/3.0 (2021-2023): Current recommended library

Key Concepts

Web Components Standards

Standard	Purpose	Status
Custom Elements	Define new HTML tags	Widely supported
Shadow DOM	Encapsulated DOM and styling	Widely supported
HTML Templates	Inert, cloneable DOM fragments	Widely supported
HTML Imports	Import HTML documents (deprecated)	Never standardized

Polymer-Specific Concepts

Data binding: Two-way ({{value}}) and one-way ([[value]]) binding syntax
Declared properties: Observable properties with type coercion
Observers: React to property changes
Computed properties: Derived values from other properties
Shady DOM: Performant Shadow DOM polyfill for older browsers
Iron Elements: Core utility components (iron-ajax, iron-list)
Paper Elements: Material Design UI components

Component Lifecycle

class MyElement extends Polymer.Element {
  static get is() { return 'my-element'; }

  // Lifecycle callbacks
  constructor() { super(); }
  connectedCallback() { super.connectedCallback(); }
  disconnectedCallback() { super.disconnectedCallback(); }
  ready() { super.ready(); /* Shadow DOM ready */ }
}

Implementation

Polymer 1.x Pattern (2015)

<dom-module id="hello-world">
  <template>
    <style>
      :host { display: block; }
      .greeting { color: blue; }
    </style>
    <div class="greeting">Hello, [[name]]!</div>
    <button on-tap="handleClick">Click me</button>
  </template>
  <script>
    Polymer({
      is: 'hello-world',
      properties: {
        name: { type: String, value: 'World' }
      },
      handleClick: function() {
        this.name = 'Polymer';
      }
    });
  </script>
</dom-module>

Polymer 3.x Pattern (2018)

import {PolymerElement, html} from '@polymer/polymer';

class HelloWorld extends PolymerElement {
  static get template() {
    return html`
      <style>:host { display: block; }</style>
      <div>Hello, [[name]]!</div>
    `;
  }

  static get properties() {
    return {
      name: { type: String, value: 'World' }
    };
  }
}
customElements.define('hello-world', HelloWorld);

Modern Lit Equivalent (2021+)

import {LitElement, html, css} from 'lit';

class HelloWorld extends LitElement {
  static styles = css`:host { display: block; }`;
  static properties = { name: {type: String} };

  constructor() {
    super();
    this.name = 'World';
  }

  render() {
    return html`<div>Hello, ${this.name}!</div>`;
  }
}
customElements.define('hello-world', HelloWorld);

References

Notes

Google used Polymer extensively: YouTube, Google Play, Google Earth
Polymer Catalog deprecated, components archived
Migration path: Polymer 3 -> LitElement -> Lit 2/3
Native Web Components now work in all evergreen browsers
No polyfills needed for modern development (Chrome, Firefox, Safari, Edge)
Stencil, Fast, and Lit are current popular alternatives
Web Components work with any framework (React, Vue, Angular)
CSS custom properties (--var) enable theming across Shadow DOM