Our original Web Component library.
PolymerElementbase class in this library.
If you're starting a new project, we recommend that you consider using LitElement instead.
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:
The easiest way to try out Polymer is to use one of these online tools:
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```
Create an element by extending PolymerElement and calling
customElements.definewith your class (see the examples below).
Install the Polymer CLI:
npm i -g polymer-cli
Run the development server and open a browser pointing to its URL:
polymer serve --npm
polymer serve, as well as
polymer build(for building an optimized app for deployment) automatically handles this transform.
propertiesgetter that describes the element's public property/attribute API (these automatically become observed attributes).
templategetter that returns an
HTMLTemplateElementdescribing the element's rendering, including encapsulated styling and any property bindings.
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:
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 also provides optional two-way data-binding, meaning:
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.
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
htmltagged template literal function (which parses
HTMLTemplateElements out of strings in JS) rather than using elements in a * All dependencies should be imported JS module imports rather than HTML Imports.
👀 Looking for Polymer v2.x? Please see the v2 branch.
👀 Looking for Polymer v1.x? Please see the v1 branch.
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.
Beyond GitHub, we try to have a variety of different lines of communication available:
The Polymer library uses a BSD-like license that is available here