Learn Polymer - 11 Code Examples & CST Typing Practice Test

Polymer.js is an open-source JavaScript library developed by Google for building reusable Web Components using modern browser APIs. It emphasizes encapsulation, custom elements, and leveraging native browser features with minimal framework overhead.

View all 11 Polymer code examples →

Polymer Counter Component Polymer Basic Counter Polymer Counter with Step Polymer Counter with Max Limit Polymer Counter with Auto-Reset Polymer Counter with History Polymer Dark Mode Counter Polymer Auto-Increment Counter Polymer Conditional Theme Counter Polymer Full Featured Counter Polymer Mega Counter

Learn POLYMER with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Polymer Counter Component

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class CounterElement extends PolymerElement {
    static get properties() {
        return {
        count: { type: Number, value: 0 },
        isDark: { type: Boolean, value: false }
        };
    }

    static get template() {
        return html`
        <div class$="${this.isDark ? 'dark-theme' : 'light-theme'}">
        <h2>Counter: [[count]]</h2>
        <div>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        </div>
        <button on-click="_toggleTheme">Switch to [[_themeName]] Theme</button>
        </div>
        `;
    }

    _increment() { this.count++; }
    _decrement() { this.count--; }
    _reset() { this.count = 0; }
    _toggleTheme() { this.isDark = !this.isDark; }
    _get_themeName() { return this.isDark ? 'Light' : 'Dark'; }
}

customElements.define('counter-element', CounterElement);

Demonstrates a simple counter Web Component using Polymer with reactive properties and template binding.

Let’s Try →

Polymer Basic Counter

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class CounterElement extends PolymerElement {
    static get properties() {
        return { count: { type: Number, value: 0 }, isDark: { type: Boolean, value: false } };
    }
    static get template() {
        return html`<div class$="${this.isDark ? 'dark-theme' : 'light-theme'}">
        <h2>Counter: [[count]]</h2>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        <button on-click="_toggleTheme">Switch Theme</button>
        </div>`;
    }
    _increment() { this.count++; }
    _decrement() { this.count--; }
    _reset() { this.count = 0; }
    _toggleTheme() { this.isDark = !this.isDark; }
}
customElements.define('counter-element', CounterElement);

Basic Polymer counter with theme toggle.

Let’s Try →

Polymer Counter with Step

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class StepCounter extends PolymerElement {
    static get properties() { return { count: Number, step: { type: Number, value: 2 } }; }
    static get template() {
        return html`<div>
        <h2>Counter: [[count]]</h2>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        </div>`;
    }
    _increment() { this.count += this.step; }
    _decrement() { this.count -= this.step; }
    _reset() { this.count = 0; }
}
customElements.define('step-counter', StepCounter);

Counter increments/decrements by a step value.

Let’s Try →

Polymer Counter with Max Limit

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class MaxCounter extends PolymerElement {
    static get properties() { return { count: Number, max: { type: Number, value: 5 } }; }
    static get template() {
        return html`<div>
        <h2>Counter: [[count]]</h2>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        </div>`;
    }
    _increment() { if(this.count < this.max) this.count++; }
    _decrement() { this.count--; }
    _reset() { this.count = 0; }
}
customElements.define('max-counter', MaxCounter);

Stops incrementing after reaching a maximum value.

Let’s Try →

Polymer Counter with Auto-Reset

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class AutoResetCounter extends PolymerElement {
    static get properties() { return { count: Number, threshold: { type: Number, value: 10 } }; }
    static get template() {
        return html`<div>
        <h2>Counter: [[count]]</h2>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        </div>`;
    }
    _increment() { this.count = (this.count + 1 > this.threshold ? 0 : this.count + 1); }
    _decrement() { this.count--; }
    _reset() { this.count = 0; }
}
customElements.define('auto-reset-counter', AutoResetCounter);

Automatically resets when counter exceeds a threshold.

Let’s Try →

Polymer Counter with History

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class HistoryCounter extends PolymerElement {
    static get properties() { return { count: Number, history: { type: Array, value: () => [] } }; }
    static get template() {
        return html`<div>
        <h2>Counter: [[count]]</h2>
        <div>History: [[history]]</div>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        </div>`;
    }
    _increment() { this.count++; this.history = [...this.history, 'Increment']; }
    _decrement() { this.count--; this.history = [...this.history, 'Decrement']; }
    _reset() { this.count = 0; this.history = [...this.history, 'Reset']; }
}
customElements.define('history-counter', HistoryCounter);

Tracks increment/decrement actions in a history array.

Let’s Try →

Polymer Dark Mode Counter

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class DarkCounter extends PolymerElement {
    static get properties() { return { isDark: { type: Boolean, value: false } }; }
    static get template() { return html`<div class$="${this.isDark ? 'dark-theme' : 'light-theme'}">
    <h2>Counter: 0</h2>
    <button on-click="_toggleTheme">Toggle Theme</button>
    </div>`; }
    _toggleTheme() { this.isDark = !this.isDark; }
}
customElements.define('dark-counter', DarkCounter);

Static counter with only theme toggle.

Let’s Try →

Polymer Auto-Increment Counter

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class AutoIncrementCounter extends PolymerElement {
    static get properties() { return { count: Number }; }
    constructor() { super(); this.count = 0; setInterval(() => this.count++, 1000); }
    static get template() { return html`<h2>Counter: [[count]]</h2>`; }
}
customElements.define('auto-increment-counter', AutoIncrementCounter);

Automatically increments counter every second.

Let’s Try →

Polymer Conditional Theme Counter

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class ConditionalThemeCounter extends PolymerElement {
    static get properties() { return { count: Number, isDark: Boolean }; }
    static get template() { return html`<div class$="${this.count % 2 === 0 ? 'dark-theme' : 'light-theme'}">
    <h2>Counter: [[count]]</h2>
    <button on-click="_increment">+</button>
    <button on-click="_decrement">-</button>
    <button on-click="_reset">Reset</button>
    </div>`; }
    _increment() { this.count++; }
    _decrement() { this.count--; }
    _reset() { this.count = 0; }
}
customElements.define('conditional-theme-counter', ConditionalThemeCounter);

Theme changes based on even/odd counter value.

Let’s Try →

Polymer Full Featured Counter

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class FullCounter extends PolymerElement {
    static get properties() {
        return { count: Number, history: { type: Array, value: () => [] }, isDark: Boolean, step: Number, max: Number };
    }
    constructor() {
        super(); this.count=0; this.history=[]; this.isDark=false; this.step=2; this.max=10;
        setInterval(()=>{ let n=this.count+this.step; if(n>this.max)n=0; this.count=n; this.history=[...this.history,'Auto Increment']; },1000);
    }
    static get template() {
        return html`<div class$="${this.isDark?'dark-theme':'light-theme'}">
        <h2>Counter: [[count]]</h2>
        <div>History: [[history]]</div>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        <button on-click="_toggleTheme">Toggle Theme</button>
        </div>`;
    }
    _increment(){let n=this.count+this.step;if(n>this.max)n=0;this.count=n;this.history=[...this.history,'Increment'];}
    _decrement(){this.count-=this.step;this.history=[...this.history,'Decrement'];}
    _reset(){this.count=0;this.history=[...this.history,'Reset'];}
    _toggleTheme(){this.isDark=!this.isDark;}
}
customElements.define('full-counter', FullCounter);

Combines step, max, auto-reset, history, auto-increment, and theme toggle.

Let’s Try →

Polymer Mega Counter

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class MegaCounter extends PolymerElement {
    static get properties() {
        return {
        count: { type: Number, value: 0 },
        history: { type: Array, value: () => [] },
        isDark: { type: Boolean, value: false },
        step: { type: Number, value: 2 },
        max: { type: Number, value: 10 }
        };
    }
    constructor() {
        super();
        setInterval(() => {
        let n = this.count + this.step;
        if(n > this.max) n = 0;
        this.count = n;
        this.history = [...this.history, 'Auto Increment'];
        }, 1000);
    }
    static get template() {
        return html`<div class$="${this.isDark?'dark-theme':'light-theme'}">
        <h2>Counter: [[count]]</h2>
        <div>History: [[history]]</div>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        <button on-click="_toggleTheme">Toggle Theme</button>
        </div>`;
    }
    _increment(){ let n=this.count+this.step; if(n>this.max)n=0; this.count=n; this.history=[...this.history,'Increment']; }
    _decrement(){ this.count-=this.step; this.history=[...this.history,'Decrement']; }
    _reset(){ this.count=0; this.history=[...this.history,'Reset']; }
    _toggleTheme(){ this.isDark=!this.isDark; }
}
customElements.define('mega-counter', MegaCounter);

Combines step, max, auto-reset, history, auto-increment, and theme toggle in one Polymer component.

Let’s Try →

Frequently Asked Questions about Polymer

What is Polymer?

What are the primary use cases for Polymer?

Web Components and design systems. Reusable UI libraries across multiple apps/frameworks. Single-page applications (SPAs) with Polymer CLI. Embedding custom widgets into legacy or multi-framework environments. Progressive web applications leveraging native browser features

What are the strengths of Polymer?

Relies heavily on browser-native features. High reusability across projects and frameworks. Small footprint compared to full frameworks. Great for long-term stable UI libraries. Strong integration with Chromium standards

What are the limitations of Polymer?

Smaller community compared to React/Vue. Requires understanding of Web Components standards. Some older browsers need polyfills. Less suited for large complex SPAs compared to frameworks. Polymer 1/2 -> 3 migration required major changes

How can I practice Polymer typing speed?

CodeSpeedTest offers 11+ real Polymer code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Polymer Counter Component

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class CounterElement extends PolymerElement {
    static get properties() {
        return {
        count: { type: Number, value: 0 },
        isDark: { type: Boolean, value: false }
        };
    }

    static get template() {
        return html`
        <div class$="${this.isDark ? 'dark-theme' : 'light-theme'}">
        <h2>Counter: [[count]]</h2>
        <div>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        </div>
        <button on-click="_toggleTheme">Switch to [[_themeName]] Theme</button>
        </div>
        `;
    }

    _increment() { this.count++; }
    _decrement() { this.count--; }
    _reset() { this.count = 0; }
    _toggleTheme() { this.isDark = !this.isDark; }
    _get_themeName() { return this.isDark ? 'Light' : 'Dark'; }
}

customElements.define('counter-element', CounterElement);

Demonstrates a simple counter Web Component using Polymer with reactive properties and template binding.

Let’s Try →

Polymer Basic Counter

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class CounterElement extends PolymerElement {
    static get properties() {
        return { count: { type: Number, value: 0 }, isDark: { type: Boolean, value: false } };
    }
    static get template() {
        return html`<div class$="${this.isDark ? 'dark-theme' : 'light-theme'}">
        <h2>Counter: [[count]]</h2>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        <button on-click="_toggleTheme">Switch Theme</button>
        </div>`;
    }
    _increment() { this.count++; }
    _decrement() { this.count--; }
    _reset() { this.count = 0; }
    _toggleTheme() { this.isDark = !this.isDark; }
}
customElements.define('counter-element', CounterElement);

Basic Polymer counter with theme toggle.

Let’s Try →

Polymer Counter with Step

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class StepCounter extends PolymerElement {
    static get properties() { return { count: Number, step: { type: Number, value: 2 } }; }
    static get template() {
        return html`<div>
        <h2>Counter: [[count]]</h2>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        </div>`;
    }
    _increment() { this.count += this.step; }
    _decrement() { this.count -= this.step; }
    _reset() { this.count = 0; }
}
customElements.define('step-counter', StepCounter);

Counter increments/decrements by a step value.

Let’s Try →

Polymer Counter with Max Limit

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class MaxCounter extends PolymerElement {
    static get properties() { return { count: Number, max: { type: Number, value: 5 } }; }
    static get template() {
        return html`<div>
        <h2>Counter: [[count]]</h2>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        </div>`;
    }
    _increment() { if(this.count < this.max) this.count++; }
    _decrement() { this.count--; }
    _reset() { this.count = 0; }
}
customElements.define('max-counter', MaxCounter);

Stops incrementing after reaching a maximum value.

Let’s Try →

Polymer Counter with Auto-Reset

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class AutoResetCounter extends PolymerElement {
    static get properties() { return { count: Number, threshold: { type: Number, value: 10 } }; }
    static get template() {
        return html`<div>
        <h2>Counter: [[count]]</h2>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        </div>`;
    }
    _increment() { this.count = (this.count + 1 > this.threshold ? 0 : this.count + 1); }
    _decrement() { this.count--; }
    _reset() { this.count = 0; }
}
customElements.define('auto-reset-counter', AutoResetCounter);

Automatically resets when counter exceeds a threshold.

Let’s Try →

Polymer Counter with History

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class HistoryCounter extends PolymerElement {
    static get properties() { return { count: Number, history: { type: Array, value: () => [] } }; }
    static get template() {
        return html`<div>
        <h2>Counter: [[count]]</h2>
        <div>History: [[history]]</div>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        </div>`;
    }
    _increment() { this.count++; this.history = [...this.history, 'Increment']; }
    _decrement() { this.count--; this.history = [...this.history, 'Decrement']; }
    _reset() { this.count = 0; this.history = [...this.history, 'Reset']; }
}
customElements.define('history-counter', HistoryCounter);

Tracks increment/decrement actions in a history array.

Let’s Try →

Polymer Dark Mode Counter

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class DarkCounter extends PolymerElement {
    static get properties() { return { isDark: { type: Boolean, value: false } }; }
    static get template() { return html`<div class$="${this.isDark ? 'dark-theme' : 'light-theme'}">
    <h2>Counter: 0</h2>
    <button on-click="_toggleTheme">Toggle Theme</button>
    </div>`; }
    _toggleTheme() { this.isDark = !this.isDark; }
}
customElements.define('dark-counter', DarkCounter);

Static counter with only theme toggle.

Let’s Try →

Polymer Auto-Increment Counter

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class AutoIncrementCounter extends PolymerElement {
    static get properties() { return { count: Number }; }
    constructor() { super(); this.count = 0; setInterval(() => this.count++, 1000); }
    static get template() { return html`<h2>Counter: [[count]]</h2>`; }
}
customElements.define('auto-increment-counter', AutoIncrementCounter);

Automatically increments counter every second.

Let’s Try →

Polymer Conditional Theme Counter

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class ConditionalThemeCounter extends PolymerElement {
    static get properties() { return { count: Number, isDark: Boolean }; }
    static get template() { return html`<div class$="${this.count % 2 === 0 ? 'dark-theme' : 'light-theme'}">
    <h2>Counter: [[count]]</h2>
    <button on-click="_increment">+</button>
    <button on-click="_decrement">-</button>
    <button on-click="_reset">Reset</button>
    </div>`; }
    _increment() { this.count++; }
    _decrement() { this.count--; }
    _reset() { this.count = 0; }
}
customElements.define('conditional-theme-counter', ConditionalThemeCounter);

Theme changes based on even/odd counter value.

Let’s Try →

Polymer Full Featured Counter

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class FullCounter extends PolymerElement {
    static get properties() {
        return { count: Number, history: { type: Array, value: () => [] }, isDark: Boolean, step: Number, max: Number };
    }
    constructor() {
        super(); this.count=0; this.history=[]; this.isDark=false; this.step=2; this.max=10;
        setInterval(()=>{ let n=this.count+this.step; if(n>this.max)n=0; this.count=n; this.history=[...this.history,'Auto Increment']; },1000);
    }
    static get template() {
        return html`<div class$="${this.isDark?'dark-theme':'light-theme'}">
        <h2>Counter: [[count]]</h2>
        <div>History: [[history]]</div>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        <button on-click="_toggleTheme">Toggle Theme</button>
        </div>`;
    }
    _increment(){let n=this.count+this.step;if(n>this.max)n=0;this.count=n;this.history=[...this.history,'Increment'];}
    _decrement(){this.count-=this.step;this.history=[...this.history,'Decrement'];}
    _reset(){this.count=0;this.history=[...this.history,'Reset'];}
    _toggleTheme(){this.isDark=!this.isDark;}
}
customElements.define('full-counter', FullCounter);

Combines step, max, auto-reset, history, auto-increment, and theme toggle.

Let’s Try →

Polymer Mega Counter

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class MegaCounter extends PolymerElement {
    static get properties() {
        return {
        count: { type: Number, value: 0 },
        history: { type: Array, value: () => [] },
        isDark: { type: Boolean, value: false },
        step: { type: Number, value: 2 },
        max: { type: Number, value: 10 }
        };
    }
    constructor() {
        super();
        setInterval(() => {
        let n = this.count + this.step;
        if(n > this.max) n = 0;
        this.count = n;
        this.history = [...this.history, 'Auto Increment'];
        }, 1000);
    }
    static get template() {
        return html`<div class$="${this.isDark?'dark-theme':'light-theme'}">
        <h2>Counter: [[count]]</h2>
        <div>History: [[history]]</div>
        <button on-click="_increment">+</button>
        <button on-click="_decrement">-</button>
        <button on-click="_reset">Reset</button>
        <button on-click="_toggleTheme">Toggle Theme</button>
        </div>`;
    }
    _increment(){ let n=this.count+this.step; if(n>this.max)n=0; this.count=n; this.history=[...this.history,'Increment']; }
    _decrement(){ this.count-=this.step; this.history=[...this.history,'Decrement']; }
    _reset(){ this.count=0; this.history=[...this.history,'Reset']; }
    _toggleTheme(){ this.isDark=!this.isDark; }
}
customElements.define('mega-counter', MegaCounter);

Combines step, max, auto-reset, history, auto-increment, and theme toggle in one Polymer component.

Let’s Try →

Frequently Asked Questions about Polymer

What is Polymer?

What are the primary use cases for Polymer?

What are the strengths of Polymer?

What are the limitations of Polymer?

How can I practice Polymer typing speed?

CodeSpeedTest offers 11+ real Polymer code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.