Polymer Logo Home Guides Feature overview Try Polymer Install Polymer 2.x Tutorial: Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties About this release What's new in 2.0 Upgrade guide Hybrid elements Release notes Custom elements Custom element concepts Define an element Declare properties Shadow DOM & styling Shadow DOM concepts DOM templating Style shadow DOM Custom CSS properties Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Browser support Overview Polyfills ES6 Tools Tools overview Polymer CLI CLI commands Create an element project Create an application project Document your elements Test your elements Publish your elements Web services polymer.json specification Node support Build apps Overview App templates Responsive app layout Routing Localization App storage Service worker Build for production Serve your app The PRPL pattern Shop App Case Study News App Case Study Resources Glossary Global settings API Reference index Elements Polymer.ArraySelector Polymer.CustomStyle Polymer.DomBind Polymer.DomIf Polymer.DomModule Polymer.DomRepeat Polymer.Element Classes Polymer.Debouncer Polymer.DomApi Polymer.FlattenedNodesObserver Mixins Polymer.ArraySelectorMixin Polymer.DirMixin Polymer.ElementMixin Polymer.GestureEventListeners Polymer.LegacyElementMixin Polymer.MutableData Polymer.OptionalMutableData Polymer.PropertiesChanged Polymer.PropertiesMixin Polymer.PropertyAccessors Polymer.PropertyEffects Polymer.TemplateStamp Functions Polymer.Class Polymer.dedupingMixin Polymer.dom Polymer.enqueueDebouncer Polymer.flush Polymer.html Polymer.htmlLiteral Polymer.importHref Polymer.mixinBehaviors Polymer.setLegacyOptimizations Polymer.setPassiveTouchGestures Polymer.setRootPath Polymer.setSanitizeDOMValue Namespaces Polymer.ArraySplice Polymer.Async Polymer.CaseMap Polymer.dom Polymer.Gestures Polymer.Path Polymer.RenderStatus Polymer.ResolveUrl Polymer.Settings Polymer.StyleGather Polymer.telemetry Polymer.Templatize

The Polymer library is in maintenance mode. For new development, we recommend Lit.

You're viewing an older version of the Polymer library documentation. Please see Polymer 3.0 for the latest.

Contents

This document is a list of miscellaneous services that you may find useful when creating Polymer elements.

Polygit is a proxy server for serving components from a CDN. It is not meant to be used for production apps, but is very useful when prototyping and sharing jsbins.

Usage:

<head>
  <base href="https://polygit.org/components/"> <!-- saves typing! -->
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="iron-selector/iron-selector.html">
</head>

For more documentation, see http://polygit.org.

Source: github.com/Polymer/polygit

polystyle is a web service that can wrap an existing stylesheet on a remote server as Polymer style module. This is useful if you have a hosted third-party stylesheet that you want to use in an element or your application.

Usage:

<head>
  <link rel="import" href="bower_components/polymer/polymer.html">
  <link rel="import" 
href="https://poly-style.appspot.com?id=theme-styles&url=https://example.com/styles.css">
  <style is="custom-style" include="theme-styles">
    ...
  </style>
</head>

For more information, see https://poly-style.appspot.com/demo/.

Related tools

  • gulp-style-modules—3rd party Gulp plugin for wrapping local CSS files into style modules

Source: github.com/PolymerLabs/polystyles

polyicon is an online tool to generate an optimized custom icon set for your app, with only the icons that you need. Instead of loading entire sets, this tool creates a slimmer (custom) icon set that you can load and use in your app.

Try it out: https://poly-icon.appspot.com/

Source: github.com/PolymerLabs/polyicon