Home Start Get started Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview Quick tour Define elements Register an element Declare properties Instance methods Behaviors Local DOM & styling Local DOM Styling 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 Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services What's new Release notes 1.0 Migration guide About Polymer 1.0 Resources Community Browser compatibility API Reference Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings 2.0 Preview About Polymer 2.0 Upgrade guide App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop News Elements News Feature overview Quick tour
Define elements
Register an element Declare properties Instance methods Behaviors
Local DOM & styling
Local DOM Styling
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
Tools
Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services
What's new
Release notes 1.0 Migration guide About Polymer 1.0
Resources
Community Browser compatibility
API Reference
Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings
{"type":"element","desc":"\n\nPolymer's binding features are only available within templates that are managed\nby Polymer. As such, these features are available in templates used to define\nPolymer elements, for example, but not for elements placed directly in the main\ndocument.\n\nIn order to use Polymer bindings without defining a new custom element, elements\nutilizing bindings may be wrapped with the `dom-bind` template extension.\nThis template will immediately stamp itself into the main document and bind\nelements to the template itself as the binding scope.\n\n```html\n<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <script src=\"components/webcomponentsjs/webcomponents-lite.js\"></script>\n <link rel=\"import\" href=\"components/polymer/polymer.html\">\n <link rel=\"import\" href=\"components/iron-ajax/iron-ajax.html\">\n\n</head>\n<body>\n\n <template is=\"dom-bind\">\n\n <iron-ajax url=\"http://...\" lastresponse=\"{{data}}\" auto></iron-ajax>\n\n <template is=\"dom-repeat\" items=\"{{data}}\">\n <div><span>{{item.first}}</span> <span>{{item.last}}</span></div>\n </template>\n\n </template>\n\n</body>\n</html>\n```\n\n","events":[{"desc":"\nFired whenever DOM is stamped by this template (rendering\nwill be deferred until all HTML imports have resolved).\n\n","jsdoc":{"description":"\nFired whenever DOM is stamped by this template (rendering\nwill be deferred until all HTML imports have resolved).\n\n","tags":[{"tag":"event","type":null,"description":"dom-change"}],"orig":"*\n * Fired whenever DOM is stamped by this template (rendering\n * will be deferred until all HTML imports have resolved).\n *\n * @event dom-change\n "},"name":"dom-change","params":[]}],"properties":[{"name":"render","type":"Function","desc":"\nForces the element to render its content. This is typically only\nnecessary to call if HTMLImports with the async attribute are used.\n ","params":[],"jsdoc":{"description":"\nForces the element to render its content. This is typically only\nnecessary to call if HTMLImports with the async attribute are used.\n ","tags":[],"orig":"*\n * Forces the element to render its content. This is typically only\n * necessary to call if HTMLImports with the async attribute are used.\n "},"function":true},{"name":"_ensureReady","type":"Function","params":[],"private":true,"function":true},{"name":"_initFeatures","type":"Function","params":[],"private":true,"function":true},{"name":"_insertChildren","type":"Function","params":[],"private":true,"function":true},{"name":"_markImportsReady","type":"Function","params":[],"private":true,"function":true},{"name":"_prepConfigure","type":"Function","params":[],"private":true,"function":true},{"name":"_registerFeatures","type":"Function","params":[],"private":true,"function":true},{"name":"_removeChildren","type":"Function","params":[],"private":true,"function":true},{"name":"_scopeElementClass","type":"Function","desc":" document","params":[{"name":"element"},{"name":"selector"}],"jsdoc":{"description":" document","tags":[],"orig":" document"},"private":true,"function":true},{"name":"_template","type":"object","private":true},{"name":"attached","type":"Function","params":[],"private":true,"configuration":true,"function":true},{"name":"created","type":"Function","params":[],"private":true,"configuration":true,"function":true},{"name":"detached","type":"Function","params":[],"private":true,"configuration":true,"function":true},{"name":"extends","type":"string","private":true,"configuration":true}],"behaviors":[],"observers":[],"is":"dom-bind","contentHref":"temp/src/lib/template/dom-bind.html","jsdoc":{"description":"\n\nPolymer's binding features are only available within templates that are managed\nby Polymer. As such, these features are available in templates used to define\nPolymer elements, for example, but not for elements placed directly in the main\ndocument.\n\nIn order to use Polymer bindings without defining a new custom element, elements\nutilizing bindings may be wrapped with the `dom-bind` template extension.\nThis template will immediately stamp itself into the main document and bind\nelements to the template itself as the binding scope.\n\n```html\n<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <script src=\"components/webcomponentsjs/webcomponents-lite.js\"></script>\n <link rel=\"import\" href=\"components/polymer/polymer.html\">\n <link rel=\"import\" href=\"components/iron-ajax/iron-ajax.html\">\n\n</head>\n<body>\n\n <template is=\"dom-bind\">\n\n <iron-ajax url=\"http://...\" lastresponse=\"{{data}}\" auto></iron-ajax>\n\n <template is=\"dom-repeat\" items=\"{{data}}\">\n <div><span>{{item.first}}</span> <span>{{item.last}}</span></div>\n </template>\n\n </template>\n\n</body>\n</html>\n```\n\n","tags":[],"orig":"\n\nPolymer's binding features are only available within templates that are managed\nby Polymer. As such, these features are available in templates used to define\nPolymer elements, for example, but not for elements placed directly in the main\ndocument.\n\nIn order to use Polymer bindings without defining a new custom element, elements\nutilizing bindings may be wrapped with the `dom-bind` template extension.\nThis template will immediately stamp itself into the main document and bind\nelements to the template itself as the binding scope.\n\n```html\n<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <script src=\"components/webcomponentsjs/webcomponents-lite.js\"></script>\n <link rel=\"import\" href=\"components/polymer/polymer.html\">\n <link rel=\"import\" href=\"components/iron-ajax/iron-ajax.html\">\n\n</head>\n<body>\n\n <template is=\"dom-bind\">\n\n <iron-ajax url=\"http://...\" lastresponse=\"{{data}}\" auto></iron-ajax>\n\n <template is=\"dom-repeat\" items=\"{{data}}\">\n <div><span>{{item.first}}</span> <span>{{item.last}}</span></div>\n </template>\n\n </template>\n\n</body>\n</html>\n```\n\n"},"demos":[]}