polymer

Our original Web Component library.

22,044

2,014

22,044

View on GitHub View on NPM

Top Related Projects

webcomponentsjs

3,874

A suite of polyfills supporting the HTML Web Components specs

lit

18,486

Lit is a simple library for building fast, lightweight web components.

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.

svelte

78,194

Cybernetically enhanced web apps

react

227,213

The library for web and native user interfaces.

vue

207,677

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

Quick Overview

Polymer is an open-source JavaScript library for building web applications using web components. It provides a set of tools and APIs that make it easier to create and manage custom HTML tags, known as web components, which can be reused across different projects.

Pros

Web Components Standard Compliance: Polymer is built on top of the Web Components standard, which ensures compatibility with modern web browsers and future-proofs the library.
Modular and Reusable Components: Polymer encourages the creation of modular, reusable components, which can improve code organization and maintainability.
Powerful Data Binding: Polymer's data binding system allows for efficient and reactive updates to the DOM, reducing the need for manual DOM manipulation.
Extensive Ecosystem: The Polymer community has created a wide range of pre-built components and tools, making it easier to get started and build complex applications.

Cons

Learning Curve: Polymer's use of web components and its own set of APIs can have a steeper learning curve compared to more traditional front-end frameworks.
Performance Concerns: In some cases, Polymer's use of data binding and shadow DOM can lead to performance issues, especially in older browsers.
Adoption and Ecosystem Maturity: While Polymer has a strong community, it may not have the same level of adoption and ecosystem maturity as some other popular front-end frameworks.
Dependency on Web Components: Polymer is heavily dependent on the Web Components standard, which is still evolving and may not be fully supported in all browsers.

Code Examples

Here are a few examples of how to use Polymer:

Creating a Custom Element:

<dom-module id="my-element">
  <template>
    <h2>Hello, [[name]]!</h2>
  </template>
  <script>
    class MyElement extends Polymer.Element {
      static get properties() {
        return {
          name: {
            type: String,
            value: 'World'
          }
        };
      }
    }
    customElements.define('my-element', MyElement);
  </script>
</dom-module>

Using Data Binding:

<dom-module id="data-binding-example">
  <template>
    <input type="text" value="{{message::input}}">
    <p>You said: [[message]]</p>
  </template>
  <script>
    class DataBindingExample extends Polymer.Element {
      static get properties() {
        return {
          message: {
            type: String,
            value: 'Hello'
          }
        };
      }
    }
    customElements.define('data-binding-example', DataBindingExample);
  </script>
</dom-module>

Handling Events:

<dom-module id="event-handling-example">
  <template>
    <button on-click="handleClick">Click me</button>
    <p>You clicked the button [[clickCount]] times.</p>
  </template>
  <script>
    class EventHandlingExample extends Polymer.Element {
      static get properties() {
        return {
          clickCount: {
            type: Number,
            value: 0
          }
        };
      }

      handleClick() {
        this.clickCount++;
      }
    }
    customElements.define('event-handling-example', EventHandlingExample);
  </script>
</dom-module>

Getting Started

To get started with Polymer, follow these steps:

Install Polymer CLI:

npm install -g polymer-cli

Create a new Polymer project:

polymer init

This will prompt you to select a starter template, such as "polymer-3-starter-kit".

Serve the project locally:

polymer serve

This will start a development server and open your project in the default web browser.

Begin building your web components and application using Polymer's APIs and tools.

For more detailed information, refer to the Polymer documentation.

Competitor Comparisons

webcomponentsjs

3,874

A suite of polyfills supporting the HTML Web Components specs

Pros of webcomponentsjs

Lightweight and focused solely on polyfills for Web Components
Browser-agnostic, providing support across a wider range of browsers
Easier to integrate into existing projects without adopting a full framework

Cons of webcomponentsjs

Lacks the comprehensive tooling and development ecosystem of Polymer
Requires more manual work to create and manage components
Doesn't provide data binding or other high-level features out of the box

Code Comparison

webcomponentsjs:

<script src="webcomponents-loader.js"></script>
<my-element></my-element>

Polymer:

<script src="polymer.js"></script>
<dom-module id="my-element">
  <template><!-- element template --></template>
  <script>
    Polymer({is: 'my-element'});
  </script>
</dom-module>

webcomponentsjs focuses on providing polyfills for native Web Components support, while Polymer offers a more comprehensive framework for building Web Components with additional features and syntactic sugar. webcomponentsjs is ideal for projects that want to use Web Components with minimal overhead, whereas Polymer is better suited for larger applications that benefit from its ecosystem and tooling.

lit

18,486

Lit is a simple library for building fast, lightweight web components.

Pros of lit

Smaller bundle size and better performance
Simpler API and easier learning curve
Better TypeScript support and type inference

Cons of lit

Less mature ecosystem compared to Polymer
Fewer built-in features and components
May require additional setup for complex applications

Code Comparison

Polymer:

class MyElement extends Polymer.Element {
  static get properties() {
    return { prop1: String, prop2: Number };
  }
  constructor() {
    super();
    this.prop1 = 'Hello';
    this.prop2 = 42;
  }
}
customElements.define('my-element', MyElement);

lit:

import { LitElement, html, property } from 'lit-element';

class MyElement extends LitElement {
  @property({ type: String }) prop1 = 'Hello';
  @property({ type: Number }) prop2 = 42;

  render() {
    return html`<p>${this.prop1} ${this.prop2}</p>`;
  }
}
customElements.define('my-element', MyElement);

The lit example showcases its more modern syntax, using decorators and a cleaner rendering approach. Polymer's example demonstrates its more traditional class-based structure with a separate properties getter.

stencil

12,489

Pros of Stencil

Generates framework-agnostic web components, allowing broader compatibility
Offers better performance through compile-time optimizations
Provides built-in TypeScript support for improved developer experience

Cons of Stencil

Steeper learning curve for developers new to web components
Smaller community and ecosystem compared to Polymer
Less mature, with potential for more frequent breaking changes

Code Comparison

Stencil component:

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Prop() name: string;
  render() {
    return <div>Hello, {this.name}</div>;
  }
}

Polymer component:

<dom-module id="my-component">
  <template>
    <style>/* CSS styles */</style>
    <div>Hello, [[name]]</div>
  </template>
  <script>
    Polymer({
      is: 'my-component',
      properties: {
        name: String
      }
    });
  </script>
</dom-module>

Stencil uses a more modern, TypeScript-based approach with decorators, while Polymer relies on HTML imports and a custom element registration syntax. Stencil's approach may be more familiar to developers coming from React or Angular backgrounds.

svelte

78,194

Cybernetically enhanced web apps

Pros of Svelte

Smaller bundle sizes and better performance due to compile-time optimization
Simpler, more intuitive syntax with less boilerplate code
Built-in state management without additional libraries

Cons of Svelte

Smaller ecosystem and community compared to Polymer
Less mature and fewer enterprise-level adoptions
Limited browser support for older versions

Code Comparison

Svelte component:

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Clicks: {count}
</button>

Polymer component:

<dom-module id="click-counter">
  <template>
    <button on-click="increment">Clicks: [[count]]</button>
  </template>
  <script>
    Polymer({
      is: 'click-counter',
      properties: {
        count: {
          type: Number,
          value: 0
        }
      },
      increment: function() {
        this.count++;
      }
    });
  </script>
</dom-module>

This comparison showcases Svelte's more concise syntax and built-in reactivity, while Polymer relies on a more verbose custom element definition.

react

227,213

The library for web and native user interfaces.

Pros of React

Larger ecosystem and community support
More flexible and can be used with various other libraries
Better performance for complex, dynamic UIs

Cons of React

Steeper learning curve, especially for beginners
Requires additional tools and libraries for full functionality
More boilerplate code compared to Polymer

Code Comparison

React component:

import React from 'react';

function MyComponent(props) {
  return <div>{props.message}</div>;
}

Polymer element:

<dom-module id="my-element">
  <template>
    <div>[[message]]</div>
  </template>
  <script>
    Polymer({
      is: 'my-element',
      properties: {
        message: String
      }
    });
  </script>
</dom-module>

React focuses on JavaScript-centric development, while Polymer emphasizes HTML-based components. React's JSX syntax combines HTML-like structure with JavaScript, whereas Polymer uses HTML templates with data binding. React's component model is more flexible, but Polymer's Web Components approach adheres more closely to web standards.

vue

207,677

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

Pros of Vue

Easier learning curve and simpler syntax
More flexible and less opinionated about project structure
Better performance for complex applications

Cons of Vue

Smaller ecosystem compared to Polymer's extensive library of web components
Less focus on native web standards and custom elements

Code Comparison

Vue component:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

Polymer element:

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

class MyElement extends PolymerElement {
  static get template() {
    return html`<div>[[message]]</div>`;
  }
  static get properties() {
    return {
      message: { type: String, value: 'Hello Polymer!' }
    };
  }
}
customElements.define('my-element', MyElement);

Vue focuses on a more familiar component structure with separate template and script sections, while Polymer emphasizes web components and custom elements. Vue's approach may be more intuitive for developers coming from other frameworks, whereas Polymer's style aligns closely with web standards.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Polymer

â¹ï¸ Note: This is the current stable version of the Polymer library. At Google I/O 2018 we announced a new Web Component base class, LitElement, as a successor to the PolymerElement base class in this library.

If you're starting a new project, we recommend that you consider using LitElement instead.

If you have a project you've built with an earlier version of the Polymer library, we recommend that you migrate to 3.0 for best compatibility with the JavaScript ecosystem. Thanks to the interoperability of Web Components, elements built with Polymer 3.0 and LitElement can be mixed and matched in the same app, so once you have updated your project to Polymer 3.0, you can migrate to LitElement incrementally, one element at a time. See our blog post on the Polymer Project roadmap for more information.

Polymer lets you build encapsulated, reusable Web Components that work just like standard HTML elements, to use in building web applications. Using a Web Component built with Polymer is as simple as importing its definition then using it like any other HTML element:

<!-- Import a component -->
<script src="https://unpkg.com/@polymer/paper-checkbox@next/paper-checkbox.js?module" type="module" ></script>

<!-- Use it like any other HTML element -->
<paper-checkbox>Web Components!</paper-checkbox>

Web Components are now implemented natively on Safari and Chrome (~70% of installed browsers), and run well on Firefox, Edge, and IE11 using polyfills. Read more below.

Getting started

The easiest way to try out Polymer is to use one of these online tools:
- Runs in all supported browsers: StackBlitz, Glitch
- Runs in browsers with JavaScript Modules: JSBin, CodePen.
You can also save this HTML file to a local file and run it in any browser that supports JavaScript Modules.
When you're ready to use Polymer in a project, install it via npm. To run the project in the browser, a module-compatible toolchain is required. We recommend installing the Polymer CLI to and using its development server as follows.
1. Add Polymer to your project:
  
  npm i @polymer/polymer
2. Create an element by extending PolymerElement and calling customElements.define with your class (see the examples below).
3. Install the Polymer CLI:
  
  npm i -g polymer-cli
4. Run the development server and open a browser pointing to its URL:
  
  polymer serve --npm
Polymer 3.0 is published on npm using JavaScript Modules. This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.

However, since Polymer uses npm conventions to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to run in the browser. The polymer-cli's development server polymer serve, as well as polymer build (for building an optimized app for deployment) automatically handles this transform.

Tools like webpack and Rollup can also be used to serve and/or bundle Polymer elements.

Minimal Example

Create a class that extends PolymerElement.
Implement a static properties getter that describes the element's public property/attribute API (these automatically become observed attributes).
Then implement a template getter that returns an HTMLTemplateElement describing the element's rendering, including encapsulated styling and any property bindings.

  <script src="node_modules/@webcomponents/webcomponents-loader.js"></script>
  <script type="module">
    import {PolymerElement, html} from '@polymer/polymer';

    class MyElement extends PolymerElement {
      static get properties() { return { mood: String }}
      static get template() {
        return html`
          <style> .mood { color: green; } </style>
          Web Components are <span class="mood">[[mood]]</span>!
        `;
      }
    }

    customElements.define('my-element', MyElement);
  </script>

  <my-element mood="happy"></my-element>

Overview

Web components are an incredibly powerful new set of primitives baked into the web platform, and open up a whole new world of possibility when it comes to componentizing front-end code and easily creating powerful, immersive, app-like experiences on the web.

Polymer is a lightweight library built on top of the web standards-based Web Components APIs, and makes it easier to build your very own custom HTML elements. Creating reusable custom elements - and using elements built by others - can make building complex web applications easier and more efficient.

By being based on the Web Components APIs built in the browser (or polyfilled where needed), elements built with Polymer are:

Built from the platform up
Self-contained
Re-usable
Interoperable across frameworks

Among many ways to leverage custom elements, they can be particularly useful for building reusable UI components. Instead of continually re-building a specific navigation bar or button in different frameworks and for different projects, you can define this element once using Polymer, and then reuse it throughout your project or in any future project.

Polymer provides a declarative syntax to easily create your own custom elements, using all standard web technologies - define the structure of the element with HTML, style it with CSS, and add interactions to the element with JavaScript.

Polymer also provides optional two-way data-binding, meaning:

When properties in the model for an element get updated, the element can update itself in response.
When the element is updated internally, the changes can be propagated back to the model.

Polymer is designed to be flexible, lightweight, and close to the web platform - the library doesn't invent complex new abstractions and magic, but uses the best features of the web platform in straightforward ways to simply sugar the creation of custom elements.

About Polymer 3.0

Polymer 3.0 is now released to stable, and introduces a major change to how Polymer is distributed: from HTML Imports on Bower, to JS modules on npm. Otherwise, the API is almost entirely backward compatible with Polymer 2.0 (the only changes are removing APIs related to HTML Imports like importHref, and converting Polymer's API to be module-based rather than globals-based).

Migrating to Polymer 3.0 by hand is mostly mechanical:

Components should be defined in JS modules instead of in HTML
Templates should be encoded in JS modules using a static get template() getter on PolymerElement subclasses using the html tagged template literal function (which parses HTMLTemplateElements out of strings in JS) rather than using <template> elements in a <dom-module>
All dependencies should be imported JS module imports rather than HTML Imports.

However, the polymer-modulizer tool automates the vast majority of this migration work. Please see details on that repo for automated conversion of Polymer 2.0 apps and elements to Polymer 3.0.

ð Looking for Polymer v2.x? Please see the v2 branch.

ð Looking for Polymer v1.x? Please see the v1 branch.

Contributing

The Polymer team loves contributions from the community! Take a look at our contributing guide for more information on how to contribute. Please file issues on the Polymer issue tracker following the issue template and contributing guide issues.

Communicating with the Polymer team

Beyond GitHub, we try to have a variety of different lines of communication available:

License

The Polymer library uses a BSD-like license that is available here

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of webcomponentsjs

Cons of webcomponentsjs

Code Comparison

Pros of lit

Cons of lit

Code Comparison

Pros of Stencil

Cons of Stencil

Code Comparison

Pros of Svelte

Cons of Svelte

Code Comparison

Pros of React

Cons of React

Code Comparison

Pros of Vue

Cons of Vue

Code Comparison

Convert designs to code with AI

README

Polymer

Getting started

Minimal Example

Overview

About Polymer 3.0

Contributing

Communicating with the Polymer team

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days