Polymer library - Polymer Project

<!DOCTYPE html> <html itemscope itemtype="http://schema.org/Organization" lang="en"> <head> <title>Polymer library - Polymer Project</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <meta name="google-site-verification" content="k0e8DrbD40s54xHNBqwIsRrSSAkZoprwtEYDnNY06bU" /> <meta name="google-site-verification" content="pnjjbQFvjPwaWhEXY6nSyaS9iyghmH-M_yLHBveDX2M"> <meta itemprop="image" content="https://www.polymer-project.org/images/logos/favicon.png"> <meta itemprop="description" content="The Polymer library uses the latest web technologies to let you create custom HTML elements."> <meta name="theme-color" content="#1e88e5"> <link rel="manifest" href="/manifest.json"> <link rel="publisher" href="https://plus.google.com/107187849809354688692"> <link rel="shortcut icon" href="/images/logos/favicon.png"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Roboto+Slab:300,500"> <link rel="stylesheet" href="/css/site.css"> <script>if (!window.customElements) { document.write(' <script src="/webcomponentsjs/webcomponents-loader.js"></script></head> <body> <pw-shell server-rendered> <div class="site-nav" slot="site-nav"> <img src="/images/logos/p-logo.png" alt="Polymer Logo"> <pw-version-selector active-docs-version="3.0" v1-page-link="/1.0/docs/devguide/feature-overview" v2-page-link="/2.0/docs/devguide/feature-overview" v3-page-link="/3.0/docs/devguide/feature-overview"></pw-version-selector> <a class="level-1" href="/" name="/" data-version="3.0"> <span>Home</span> </a> <a class="level-1" href="/3.0/docs/devguide/feature-overview" name="/3.0/docs/devguide/feature-overview" data-version="3.0"> <span>Guides</span> <paper-icon-button icon="icons:expand-more" onclick="_expandClicked(event)"> </paper-icon-button> </a> <iron-collapse class=""> <a class="level-2 " href="/3.0/docs/devguide/feature-overview" name="/3.0/docs/devguide/feature-overview"> <span>Feature overview</span> </a> <a class="level-2 " href="/3.0/docs/quick-tour" name="/3.0/docs/quick-tour"> <span>Try Polymer</span> </a> <a class="level-2 " href="/3.0/docs/install-3-0" name="/3.0/docs/install-3-0"> <span>Install Polymer 3.x</span> </a> <a class="level-2" onclick="_expandClicked(event)"> <span>Tutorial: Build an element</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 indent" href="/3.0/docs/first-element/intro" name="/3.0/docs/first-element/intro"> <span>1. Get set up</span> </a> <a class="level-2 indent" href="/3.0/docs/first-element/step-2" name="/3.0/docs/first-element/step-2"> <span>2. Add shadow DOM</span> </a> <a class="level-2 indent" href="/3.0/docs/first-element/step-3" name="/3.0/docs/first-element/step-3"> <span>3. Data binding & properties</span> </a> <a class="level-2 indent" href="/3.0/docs/first-element/step-4" name="/3.0/docs/first-element/step-4"> <span>4. React to input</span> </a> <a class="level-2 indent" href="/3.0/docs/first-element/step-5" name="/3.0/docs/first-element/step-5"> <span>5. Theming with custom properties</span> </a> </iron-collapse> <a class="level-2" onclick="_expandClicked(event)"> <span>About this release</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 indent" href="/3.0/docs/about_30" name="/3.0/docs/about_30"> <span>What's new in 3.0</span> </a> <a class="level-2 indent" href="/3.0/docs/upgrade" name="/3.0/docs/upgrade"> <span>Upgrade guide</span> </a> <a class="level-2 indent" href="/3.0/docs/release-notes" name="/3.0/docs/release-notes"> <span>Release notes</span> </a> </iron-collapse> <a class="level-2" onclick="_expandClicked(event)"> <span>Custom elements</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 indent" href="/3.0/docs/devguide/custom-elements" name="/3.0/docs/devguide/custom-elements"> <span>Custom element concepts</span> </a> <a class="level-2 indent" href="/3.0/docs/devguide/registering-elements" name="/3.0/docs/devguide/registering-elements"> <span>Define an element</span> </a> <a class="level-2 indent" href="/3.0/docs/devguide/properties" name="/3.0/docs/devguide/properties"> <span>Declare properties</span> </a> <a class="level-2 " href="/3.0/docs/devguide/legacy-elements" name="/3.0/docs/devguide/legacy-elements"> <span>Working with legacy elements</span> </a> </iron-collapse> <a class="level-2" onclick="_expandClicked(event)"> <span>Shadow DOM & styling</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 indent" href="/3.0/docs/devguide/shadow-dom" name="/3.0/docs/devguide/shadow-dom"> <span>Shadow DOM concepts</span> </a> <a class="level-2 indent" href="/3.0/docs/devguide/dom-template" name="/3.0/docs/devguide/dom-template"> <span>DOM templating</span> </a> <a class="level-2 indent" href="/3.0/docs/devguide/style-shadow-dom" name="/3.0/docs/devguide/style-shadow-dom"> <span>Style shadow DOM</span> </a> <a class="level-2 indent" href="/3.0/docs/devguide/custom-css-properties" name="/3.0/docs/devguide/custom-css-properties"> <span>Custom CSS properties</span> </a> </iron-collapse> <a class="level-2" onclick="_expandClicked(event)"> <span>Events</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 indent" href="/3.0/docs/devguide/events" name="/3.0/docs/devguide/events"> <span>Handle and fire events</span> </a> <a class="level-2 indent" href="/3.0/docs/devguide/gesture-events" name="/3.0/docs/devguide/gesture-events"> <span>Gesture events</span> </a> </iron-collapse> <a class="level-2" onclick="_expandClicked(event)"> <span>Data system</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 indent" href="/3.0/docs/devguide/data-system" name="/3.0/docs/devguide/data-system"> <span>Data system concepts</span> </a> <a class="level-2 indent" href="/3.0/docs/devguide/model-data" name="/3.0/docs/devguide/model-data"> <span>Work with object and array data</span> </a> <a class="level-2 indent" href="/3.0/docs/devguide/observers" name="/3.0/docs/devguide/observers"> <span>Observers and computed properties</span> </a> <a class="level-2 indent" href="/3.0/docs/devguide/data-binding" name="/3.0/docs/devguide/data-binding"> <span>Data binding</span> </a> <a class="level-2 indent" href="/3.0/docs/devguide/templates" name="/3.0/docs/devguide/templates"> <span>Helper elements</span> </a> </iron-collapse> <a class="level-2" onclick="_expandClicked(event)"> <span>Browser support</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 indent" href="/3.0/docs/browsers" name="/3.0/docs/browsers"> <span>Overview</span> </a> <a class="level-2 indent" href="/3.0/docs/polyfills" name="/3.0/docs/polyfills"> <span>Polyfills</span> </a> <a class="level-2 indent" href="/3.0/docs/es6" name="/3.0/docs/es6"> <span>ES6 and modules</span> </a> </iron-collapse> <a class="level-2" onclick="_expandClicked(event)"> <span>Tools</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 indent" href="/3.0/docs/tools/overview" name="/3.0/docs/tools/overview"> <span>Tools overview</span> </a> <a class="level-2 indent" href="/3.0/docs/tools/polymer-cli" name="/3.0/docs/tools/polymer-cli"> <span>Polymer CLI</span> </a> <a class="level-2 indent" href="/3.0/docs/tools/polymer-cli-commands" name="/3.0/docs/tools/polymer-cli-commands"> <span>CLI commands</span> </a> <a class="level-2 indent" href="/3.0/docs/tools/create-element-polymer-cli" name="/3.0/docs/tools/create-element-polymer-cli"> <span>Create an element project</span> </a> <a class="level-2 indent" href="/3.0/docs/tools/create-app-polymer-cli" name="/3.0/docs/tools/create-app-polymer-cli"> <span>Create an application project</span> </a> <a class="level-2 indent" href="/3.0/docs/tools/documentation" name="/3.0/docs/tools/documentation"> <span>Document your elements</span> </a> <a class="level-2 indent" href="/3.0/docs/tools/tests" name="/3.0/docs/tools/tests"> <span>Test your elements</span> </a> <a class="level-2 indent" href="/3.0/docs/tools/polymer-json" name="/3.0/docs/tools/polymer-json"> <span>polymer.json specification</span> </a> <a class="level-2 indent" href="/3.0/docs/tools/node-support" name="/3.0/docs/tools/node-support"> <span>Node support</span> </a> </iron-collapse> <a class="level-2" onclick="_expandClicked(event)"> <span>Build apps</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 " href="/3.0/docs/apps/" name="/3.0/docs/apps/"> <span>Overview</span> </a> <a class="level-2 indent" href="/3.0/docs/apps/templates" name="/3.0/docs/apps/templates"> <span>App templates</span> </a> <a class="level-2 indent" href="/3.0/docs/apps/build-for-production" name="/3.0/docs/apps/build-for-production"> <span>Build for production</span> </a> <a class="level-2 indent" href="/3.0/docs/apps/serve" name="/3.0/docs/apps/serve"> <span>Serve your app</span> </a> <a class="level-2 indent" href="/3.0/docs/apps/prpl" name="/3.0/docs/apps/prpl"> <span>The PRPL pattern</span> </a> <a class="level-2 indent" href="/3.0/docs/apps/service-worker" name="/3.0/docs/apps/service-worker"> <span>Service worker</span> </a> </iron-collapse> <a class="level-2" onclick="_expandClicked(event)"> <span>Reference</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 indent" href="/3.0/docs/glossary" name="/3.0/docs/glossary"> <span>Glossary</span> </a> <a class="level-2 indent" href="/3.0/docs/devguide/settings" name="/3.0/docs/devguide/settings"> <span>Global settings</span> </a> </iron-collapse> </iron-collapse> <a class="level-1" href="/3.0/api/" name="/3.0/api/" data-version="3.0"> <span>API Reference</span> <paper-icon-button icon="icons:expand-more" onclick="_expandClicked(event)"> </paper-icon-button> </a> <iron-collapse class=""> <a class="level-2 " href="/3.0/api/" name="/3.0/api/"> <span>index</span> </a> <a class="level-2 " href="/3.0/api/polymer-element" name="/3.0/api/polymer-element"> <span>polymer-element.js</span> </a> <a class="level-2" onclick="_expandClicked(event)"> <span>Elements</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 indent" href="/3.0/api/elements/array-selector" name="/3.0/api/elements/array-selector"> <span>array-selector.js</span> </a> <a class="level-2 indent" href="/3.0/api/elements/custom-style" name="/3.0/api/elements/custom-style"> <span>custom-style.js</span> </a> <a class="level-2 indent" href="/3.0/api/elements/dom-bind" name="/3.0/api/elements/dom-bind"> <span>dom-bind.js</span> </a> <a class="level-2 indent" href="/3.0/api/elements/dom-if" name="/3.0/api/elements/dom-if"> <span>dom-if.js</span> </a> <a class="level-2 indent" href="/3.0/api/elements/dom-module" name="/3.0/api/elements/dom-module"> <span>dom-module.js</span> </a> <a class="level-2 indent" href="/3.0/api/elements/dom-repeat" name="/3.0/api/elements/dom-repeat"> <span>dom-repeat.js</span> </a> </iron-collapse> <a class="level-2" onclick="_expandClicked(event)"> <span>Mixins</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 indent" href="/3.0/api/mixins/dir-mixin" name="/3.0/api/mixins/dir-mixin"> <span>dir-mixin.js</span> </a> <a class="level-2 indent" href="/3.0/api/mixins/disable-upgrade-mixin" name="/3.0/api/mixins/disable-upgrade-mixin"> <span>disable-upgrade-mixin.js</span> </a> <a class="level-2 indent" href="/3.0/api/mixins/element-mixin" name="/3.0/api/mixins/element-mixin"> <span>element-mixin.js</span> </a> <a class="level-2 indent" href="/3.0/api/mixins/gesture-event-listeners" name="/3.0/api/mixins/gesture-event-listeners"> <span>gesture-event-listeners.js</span> </a> <a class="level-2 indent" href="/3.0/api/mixins/mutable-data" name="/3.0/api/mixins/mutable-data"> <span>mutable-data.js</span> </a> <a class="level-2 indent" href="/3.0/api/mixins/properties-changed" name="/3.0/api/mixins/properties-changed"> <span>properties-changed.js</span> </a> <a class="level-2 indent" href="/3.0/api/mixins/properties-mixin" name="/3.0/api/mixins/properties-mixin"> <span>properties-mixin.js</span> </a> <a class="level-2 indent" href="/3.0/api/mixins/property-accessors" name="/3.0/api/mixins/property-accessors"> <span>property-accessors.js</span> </a> <a class="level-2 indent" href="/3.0/api/mixins/property-effects" name="/3.0/api/mixins/property-effects"> <span>property-effects.js</span> </a> <a class="level-2 indent" href="/3.0/api/mixins/strict-binding-parser" name="/3.0/api/mixins/strict-binding-parser"> <span>strict-binding-parser.js</span> </a> <a class="level-2 indent" href="/3.0/api/mixins/template-stamp" name="/3.0/api/mixins/template-stamp"> <span>template-stamp.js</span> </a> </iron-collapse> <a class="level-2" onclick="_expandClicked(event)"> <span>Utils</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 indent" href="/3.0/api/utils/array-splice" name="/3.0/api/utils/array-splice"> <span>array-splice.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/async" name="/3.0/api/utils/async"> <span>async.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/case-map" name="/3.0/api/utils/case-map"> <span>case-map.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/debounce" name="/3.0/api/utils/debounce"> <span>debounce.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/flattened-nodes-observer" name="/3.0/api/utils/flattened-nodes-observer"> <span>flattened-nodes-observer.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/flush" name="/3.0/api/utils/flush"> <span>flush.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/gestures" name="/3.0/api/utils/gestures"> <span>gestures.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/html-tag" name="/3.0/api/utils/html-tag"> <span>html-tag.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/mixin" name="/3.0/api/utils/mixin"> <span>mixin.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/path" name="/3.0/api/utils/path"> <span>path.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/render-status" name="/3.0/api/utils/render-status"> <span>render-status.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/resolve-url" name="/3.0/api/utils/resolve-url"> <span>resolve-url.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/settings" name="/3.0/api/utils/settings"> <span>settings.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/style-gather" name="/3.0/api/utils/style-gather"> <span>style-gather.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/telemetry" name="/3.0/api/utils/telemetry"> <span>telemetry.js</span> </a> <a class="level-2 indent" href="/3.0/api/utils/templatize" name="/3.0/api/utils/templatize"> <span>templatize.js</span> </a> </iron-collapse> <a class="level-2" onclick="_expandClicked(event)"> <span>Legacy</span> <paper-icon-button icon="icons:expand-more"></paper-icon-button> </a> <iron-collapse> <a class="level-2 indent" href="/3.0/api/legacy/class" name="/3.0/api/legacy/class"> <span>class.js</span> </a> <a class="level-2 indent" href="/3.0/api/legacy/legacy-data-mixin" name="/3.0/api/legacy/legacy-data-mixin"> <span>legacy-data-mixin.js</span> </a> <a class="level-2 indent" href="/3.0/api/legacy/legacy-element-mixin" name="/3.0/api/legacy/legacy-element-mixin"> <span>legacy-element-mixin.js</span> </a> <a class="level-2 indent" href="/3.0/api/legacy/mutable-data-behavior" name="/3.0/api/legacy/mutable-data-behavior"> <span>mutable-data-behavior.js</span> </a> <a class="level-2 indent" href="/3.0/api/legacy/polymer-fn" name="/3.0/api/legacy/polymer-fn"> <span>polymer-fn.js</span> </a> <a class="level-2 indent" href="/3.0/api/legacy/polymer.dom" name="/3.0/api/legacy/polymer.dom"> <span>polymer.dom.js</span> </a> <a class="level-2 indent" href="/3.0/api/legacy/templatizer-behavior" name="/3.0/api/legacy/templatizer-behavior"> <span>templatizer-behavior.js</span> </a> </iron-collapse> </iron-collapse> </div> <script> function _expandClicked(event) { var navLink = event.target.parentNode; var navCollapse = navLink.nextElementSibling; document.querySelector('pw-shell').styleLinkPath(navLink, !navCollapse.opened); // Don't actually click the link. event.preventDefault(); event.stopImmediatePropagation(); } </script> <div class="devguide-main"> <nav> <pw-version-selector active-docs-version="3.0" v1-page-link="/1.0/docs/devguide/feature-overview" v2-page-link="/2.0/docs/devguide/feature-overview" v3-page-link="/3.0/docs/devguide/feature-overview"></pw-version-selector> <div class="sidenav"> <a class="sidenav-content iron-selected" name="/3.0/docs/devguide/feature-overview" href="/3.0/docs/devguide/feature-overview"> Feature overview </a> <a class="sidenav-content " name="/3.0/docs/quick-tour" href="/3.0/docs/quick-tour"> Try Polymer </a> <a class="sidenav-content " name="/3.0/docs/install-3-0" href="/3.0/docs/install-3-0"> Install Polymer 3.x </a> <div class="sidenav-content sidenav-header">Tutorial: Build an element</div> <a class="sidenav-content indent " name="/3.0/docs/first-element/intro" href="/3.0/docs/first-element/intro"> 1. Get set up </a> <a class="sidenav-content indent " name="/3.0/docs/first-element/step-2" href="/3.0/docs/first-element/step-2"> 2. Add shadow DOM </a> <a class="sidenav-content indent " name="/3.0/docs/first-element/step-3" href="/3.0/docs/first-element/step-3"> 3. Data binding & properties </a> <a class="sidenav-content indent " name="/3.0/docs/first-element/step-4" href="/3.0/docs/first-element/step-4"> 4. React to input </a> <a class="sidenav-content indent " name="/3.0/docs/first-element/step-5" href="/3.0/docs/first-element/step-5"> 5. Theming with custom properties </a> <div class="sidenav-content sidenav-endheader"></div> <div class="sidenav-content sidenav-header">About this release</div> <a class="sidenav-content indent " name="/3.0/docs/about_30" href="/3.0/docs/about_30"> What's new in 3.0 </a> <a class="sidenav-content indent " name="/3.0/docs/upgrade" href="/3.0/docs/upgrade"> Upgrade guide </a> <a class="sidenav-content indent " name="/3.0/docs/release-notes" href="/3.0/docs/release-notes"> Release notes </a> <div class="sidenav-content sidenav-endheader"></div> <div class="sidenav-content sidenav-header">Custom elements</div> <a class="sidenav-content indent " name="/3.0/docs/devguide/custom-elements" href="/3.0/docs/devguide/custom-elements"> Custom element concepts </a> <a class="sidenav-content indent " name="/3.0/docs/devguide/registering-elements" href="/3.0/docs/devguide/registering-elements"> Define an element </a> <a class="sidenav-content indent " name="/3.0/docs/devguide/properties" href="/3.0/docs/devguide/properties"> Declare properties </a> <a class="sidenav-content " name="/3.0/docs/devguide/legacy-elements" href="/3.0/docs/devguide/legacy-elements"> Working with legacy elements </a> <div class="sidenav-content sidenav-endheader"></div> <div class="sidenav-content sidenav-header">Shadow DOM & styling</div> <a class="sidenav-content indent " name="/3.0/docs/devguide/shadow-dom" href="/3.0/docs/devguide/shadow-dom"> Shadow DOM concepts </a> <a class="sidenav-content indent " name="/3.0/docs/devguide/dom-template" href="/3.0/docs/devguide/dom-template"> DOM templating </a> <a class="sidenav-content indent " name="/3.0/docs/devguide/style-shadow-dom" href="/3.0/docs/devguide/style-shadow-dom"> Style shadow DOM </a> <a class="sidenav-content indent " name="/3.0/docs/devguide/custom-css-properties" href="/3.0/docs/devguide/custom-css-properties"> Custom CSS properties </a> <div class="sidenav-content sidenav-endheader"></div> <div class="sidenav-content sidenav-header">Events</div> <a class="sidenav-content indent " name="/3.0/docs/devguide/events" href="/3.0/docs/devguide/events"> Handle and fire events </a> <a class="sidenav-content indent " name="/3.0/docs/devguide/gesture-events" href="/3.0/docs/devguide/gesture-events"> Gesture events </a> <div class="sidenav-content sidenav-endheader"></div> <div class="sidenav-content sidenav-header">Data system</div> <a class="sidenav-content indent " name="/3.0/docs/devguide/data-system" href="/3.0/docs/devguide/data-system"> Data system concepts </a> <a class="sidenav-content indent " name="/3.0/docs/devguide/model-data" href="/3.0/docs/devguide/model-data"> Work with object and array data </a> <a class="sidenav-content indent " name="/3.0/docs/devguide/observers" href="/3.0/docs/devguide/observers"> Observers and computed properties </a> <a class="sidenav-content indent " name="/3.0/docs/devguide/data-binding" href="/3.0/docs/devguide/data-binding"> Data binding </a> <a class="sidenav-content indent " name="/3.0/docs/devguide/templates" href="/3.0/docs/devguide/templates"> Helper elements </a> <div class="sidenav-content sidenav-endheader"></div> <div class="sidenav-content sidenav-header">Browser support</div> <a class="sidenav-content indent " name="/3.0/docs/browsers" href="/3.0/docs/browsers"> Overview </a> <a class="sidenav-content indent " name="/3.0/docs/polyfills" href="/3.0/docs/polyfills"> Polyfills </a> <a class="sidenav-content indent " name="/3.0/docs/es6" href="/3.0/docs/es6"> ES6 and modules </a> <div class="sidenav-content sidenav-endheader"></div> <div class="sidenav-content sidenav-header">Tools</div> <a class="sidenav-content indent " name="/3.0/docs/tools/overview" href="/3.0/docs/tools/overview"> Tools overview </a> <a class="sidenav-content indent " name="/3.0/docs/tools/polymer-cli" href="/3.0/docs/tools/polymer-cli"> Polymer CLI </a> <a class="sidenav-content indent " name="/3.0/docs/tools/polymer-cli-commands" href="/3.0/docs/tools/polymer-cli-commands"> CLI commands </a> <a class="sidenav-content indent " name="/3.0/docs/tools/create-element-polymer-cli" href="/3.0/docs/tools/create-element-polymer-cli"> Create an element project </a> <a class="sidenav-content indent " name="/3.0/docs/tools/create-app-polymer-cli" href="/3.0/docs/tools/create-app-polymer-cli"> Create an application project </a> <a class="sidenav-content indent " name="/3.0/docs/tools/documentation" href="/3.0/docs/tools/documentation"> Document your elements </a> <a class="sidenav-content indent " name="/3.0/docs/tools/tests" href="/3.0/docs/tools/tests"> Test your elements </a> <a class="sidenav-content indent " name="/3.0/docs/tools/polymer-json" href="/3.0/docs/tools/polymer-json"> polymer.json specification </a> <a class="sidenav-content indent " name="/3.0/docs/tools/node-support" href="/3.0/docs/tools/node-support"> Node support </a> <div class="sidenav-content sidenav-endheader"></div> <div class="sidenav-content sidenav-header">Build apps</div> <a class="sidenav-content " name="/3.0/docs/apps/" href="/3.0/docs/apps/"> Overview </a> <a class="sidenav-content indent " name="/3.0/docs/apps/templates" href="/3.0/docs/apps/templates"> App templates </a> <a class="sidenav-content indent " name="/3.0/docs/apps/build-for-production" href="/3.0/docs/apps/build-for-production"> Build for production </a> <a class="sidenav-content indent " name="/3.0/docs/apps/serve" href="/3.0/docs/apps/serve"> Serve your app </a> <a class="sidenav-content indent " name="/3.0/docs/apps/prpl" href="/3.0/docs/apps/prpl"> The PRPL pattern </a> <a class="sidenav-content indent " name="/3.0/docs/apps/service-worker" href="/3.0/docs/apps/service-worker"> Service worker </a> <div class="sidenav-content sidenav-endheader"></div> <div class="sidenav-content sidenav-header">Reference</div> <a class="sidenav-content indent " name="/3.0/docs/glossary" href="/3.0/docs/glossary"> Glossary </a> <a class="sidenav-content indent " name="/3.0/docs/devguide/settings" href="/3.0/docs/devguide/settings"> Global settings </a> <div class="sidenav-content sidenav-endheader"></div> </div> </nav> <div class="content-container"> <header id="header" data-version="3.0"> <p>Feature Overview</p> <h1>Polymer library</h1> <a class="edit-on-github" target="_blank" href="https://github.com/Polymer/polymer-library-docs/edit/master/app/3.0/docs/devguide/feature-overview.md"> Edit on GitHub </a> </header> <div class="version-alert upgrade-alert"> <img src="/images/alerts/upgrade.svg" height="36px"> <p> <strong> The Polymer library is in maintenance mode. For new development, we recommend <a href="https://lit.dev">Lit</a>. </strong> </p> </div> <main> <style> main { position: relative; background: white; padding: 10px 40px; font-size: 16px; font-family: 'Roboto', 'Noto', sans-serif; line-height: 24px; font-weight: 300; /* layout horizontal-reverse */ display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } @media (max-width: 1000px) { main { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* At < 1000px, the TOC floats to the top, so we can add back the right-padding. */ padding-right: 40px; } } @media (max-width: 500px) { main { padding-left: 20px; padding-right: 20px; } } article { min-width: 0; /* For some reason, this is non-0 */ max-width: 800px; padding-right: 20px; } .article-wrapper.right-nav { width: calc(100% - 300px); /* 300px is the width of the TOC */ } .details-wrapper { display: block; position: relative; overflow-x: hidden; overflow-y: auto; margin-top: 20px; width: 300px; } .details-wrapper.fixed { position: fixed; right: 40px; /* The <main> right padding */ } .details-wrapper ul { list-style-type: none; font-size: 14px; margin: 0; } .details-wrapper ul[data-depth="1"], .details-wrapper ul[data-depth="3"] { padding: 0; margin-top: 10px; } .details-wrapper ul[data-depth="1"] a, .details-wrapper ul[data-depth="3"] a { color: black; font-weight: 500; } .details-wrapper ul[data-depth="2"] { font-weight: 300; padding: 0 20px; } .details-wrapper ul[data-depth="2"] a { font-weight: 300; } @media (max-width: 1000px) { .details-wrapper { padding: 0; max-width: 100%; } } details { display: block; will-change: transform; } @media (min-width: 1001px) { details { padding-left: 20px; border-left: 1px solid black; } } details summary { font-weight: bold; font-size: 15px; line-height: 24px; } details summary::-webkit-details-marker { display: none; } @media (max-width: 1000px) { details summary::-webkit-details-marker { display: inline-block; } } pre { background: white; font-weight: 400; } h1 { font-size: 40px; font-weight: 300; line-height: 48px; } h2 { font-family: Helvetica, Arial, sans-serif; font-weight: bold; border-bottom: 1px solid #f50057; margin: 20px 0; } h3 { font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 24px; } @media (max-width: 500px) { h3 { font-size: 18px; } } h4, p.caption { font-size: 16px; font-weight: 500; } p.caption { margin-bottom: 0; } a > code { color: #1e88e5 !important; } table { border-collapse: collapse; } table th { text-align: left; padding: 12px 12px 12px 0px; } table td { padding: 12px 12px 12px 0px; border-top: 1px solid #cfd8dc; /* blue-grey-100 */ vertical-align: top; } .alert { padding: 10px 10px 10px 44px; /* 34px from the icon + 10px left padding */ margin: 30px; border-radius: 3px; font-size: 15px; } @media (max-width: 767px) { .alert { margin: 0px; } } .alert:before { display: inline-block; /* Hack to have the icon in a separate column than the text */ float: left; margin-left: -34px; /* the icon is 24px wide, + 10px padding */ } .alert.alert-success, .alert.alert-tip { background-color: #E8F5E9; border: 1px solid #C8E6C9; } .alert.alert-success:before, .alert.alert-tip:before { content: url(/images/alerts/tip.svg); } .alert.alert-info { background-color: #E1F5FE; border: 1px solid #B3E5FC; } .alert.alert-info:before { content: url(/images/alerts/info.svg); } .alert.alert-error, .alert.alert-warning { background-color: #FBE9E7; border: 1px solid #FFCCBC; } .alert.alert-error:before, .alert.alert-warning:before { content: url(/images/alerts/warning.svg); } /* Helpers to automagically lay out in a row and resize images */ .image-container { width: 100%; max-width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; } .image-container .image-wrapper { -webkit-flex: 1; -ms-flex: 1; flex: 1; margin: 0 10px; } .image-container img { width: 100%; height: auto; } </style><div class="article-wrapper"><article><p>The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be:</p> <ul> <li>Instantiated using a constructor or <code>document.createElement</code>.</li> <li>Configured using attributes or properties.</li> <li>Populated with internal DOM inside each instance.</li> <li>Responsive to property and attribute changes.</li> <li>Styled with internal defaults or externally.</li> <li>Responsive to methods that manipulate its internal state.</li> </ul> <p>A basic Polymer element definition looks like this:</p> <pre><code class="language-js"><span class="hljs-keyword">import</span> {PolymerElement, html} <span class="hljs-keyword">from</span> <span class="hljs-string">'@polymer/polymer/polymer-element.js'</span>; <span class="hljs-comment">// Define the element's API using an ES2015 class</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">XCustom</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">PolymerElement</span> </span>{ <span class="hljs-comment">// Define optional shadow DOM template</span> <span class="hljs-keyword">static</span> get template() { <span class="hljs-keyword">return</span> html<span class="hljs-string">` <style> /* CSS rules for your element */ </style>  <div>[[greeting]]</div>  `</span>; } <span class="hljs-comment">// Declare properties for the element's public API</span> <span class="hljs-keyword">static</span> get properties() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">greeting</span>: { <span class="hljs-attr">type</span>: <span class="hljs-built_in">String</span> } } } <span class="hljs-keyword">constructor</span>() { <span class="hljs-keyword">super</span>(); <span class="hljs-keyword">this</span>.greeting = <span class="hljs-string">'Hello!'</span>; } <span class="hljs-comment">// Add methods to the element's public API</span> greetMe() { <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.greeting); } } <span class="hljs-comment">// Register the x-custom element with the browser</span> customElements.define(<span class="hljs-string">'x-custom'</span>, XCustom); </code></pre> <p>This guide divides the features into the following groups:</p> <ul> <li> <p><a href="custom-elements">Custom elements</a>. Registering an element associates a class with a custom element name. The element provides callbacks to manage its lifecycle. Polymer also lets you declare properties, to integrate your element's property API with the Polymer data system.</p> </li> <li> <p><a href="shadow-dom">Shadow DOM</a>. Shadow DOM provides a local, encapsulated DOM tree for your element. Polymer can automatically create and populate a shadow tree for your element from a DOM template.</p> </li> <li> <p><a href="events">Events</a>. Polymer provides a declarative syntax for attaching event listeners to shadow DOM children. It also provides an optional library for handling gesture events.</p> </li> <li> <p><a href="data-system">Data system</a>. The Polymer data system provides data binding to properties and attributes; property observers; and computed properties.</p> </li> </ul> <p>If you're upgrading an existing 2.x element to 3.x, see the <a href="/3.0/docs/upgrade">Upgrade guide</a> for advice.</p> <p>If you're looking for the latest changes in this release, see the <a href="/3.0/docs/release-notes">Release notes</a>.</p> </article></div> </main> </div> </div> </pw-shell> <pw-footer></pw-footer> <script src="/js/app.js"></script> </body> </html>

CINXE.COM

Polymer library - Polymer Project