polymer-project.orgPolymer library - Polymer Project

Guides Feature overview Try Polymer Install Polymer 3.x Tutorial: Build an element 1. Get set up 2. Add shadow DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties About this release What’s new in 3.0 Upgrade guide Release notes Custom elements Custom element concepts Define an element Declare properties Working with legacy elements 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 and modules Tools Tools overview Polymer CLI CLI commands Create an element project Create an application project Document your elements Test your elements polymer.json specification Node support Build apps Overview App templates Build for production Serve your app The PRPL pattern Service worker Reference Glossary Global settings API Reference index polymer-element.js Elements array-selector.js custom-style.js dom-bind.js dom-if.js dom-module.js dom-repeat.js Mixins dir-mixin.js disable-upgrade-mixin.js element-mixin.js gesture-event-listeners.js mutable-data.js properties-changed.js properties-mixin.js property-accessors.js property-effects.js strict-binding-parser.js template-stamp.js Utils array-splice.js async.js case-map.js debounce.js flattened-nodes-observer.js flush.js gestures.js html-tag.js mixin.js path.js render-status.js resolve-url.js settings.js style-gather.js telemetry.js templatize.js Legacy class.js legacy-data-mixin.js legacy-element-mixin.js mutable-data-behavior.js polymer-fn.js polymer.dom.js templatizer-behavior.js Feature overview Try Polymer Install Polymer 3.x Tutorial: Build an element 1. Get set up 2. Add shadow DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties About this release What’s new in 3.0 Upgrade guide Release notes Custom elements Custom element concepts Define an element Declare properties Working with legacy elements 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 and modules Tools Tools overview Polymer CLI CLI commands Create an element project Create an application project Document your elements Test your elements polymer.json specification Node support Build apps Overview App templates Build for production Serve your app The PRPL pattern Service worker Reference Glossary Global settings Feature Overview Polymer library Edit on GitHub The Polymer library is in maintenance mode. For new development, we recommend Lit . 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: Instantiated using a constructor or document.createElement . Configured using attributes or properties. Populated with internal DOM inside each instance. Responsive to property and attribute changes. Styled with internal defaults or externally. Responsive to methods that manipulate its internal state. A basic Polymer element definition looks like this: import {PolymerElement, html} from ’@polymer/polymer/polymer-element.js’ ; // Define the element’s API using an ES2015 class class XCustom extends PolymerElement { // Define optional shadow DOM template static get template() { return html ` style /* CSS rules for your element */ /style ! shadow DOM for your elementdiv[[greeting]]/div ! data bindings in shadow DOM` ; } // Declare properties for the element’s public API static get properties() { return { greeting : { type : String } } } constructor () { super (); this .greeting = ’Hello!’ ; } // Add methods to the element’s public API greetMe() { console .log( this .greeting); } } // Register the x-custom element with the browser customElements.define( ’x-custom’ , XCustom); This guide divides the features into the following groups: Custom elements . 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. Shadow DOM . 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. Events . Polymer provides a declarative syntax for attaching event listeners to shadow DOM children. It also provides an optional library for handling gesture events. Data system . The Polymer data system provides data binding to properties and attributes; property observers; and computed properties. If you’re upgrading an existing 2.x element to 3.x, see the Upgrade guide for advice. If you’re looking for the latest changes in this release, see the Release notes...