Learn POLYMER with Real Code Examples

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.