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":"\nStamps the template iff the `if` property is truthy.\n\nWhen `if` becomes falsey, the stamped content is hidden but not\nremoved from dom. When `if` subsequently becomes truthy again, the content\nis simply re-shown. This approach is used due to its favorable performance\ncharacteristics: the expense of creating template content is paid only\nonce and lazily.\n\nSet the `restamp` property to true to force the stamped content to be\ncreated / destroyed when the `if` condition changes.\n ","events":[{"desc":"\nFired whenever DOM is added or removed/hidden by this template (by\ndefault, rendering occurs lazily). To force immediate rendering, call\n`render`.\n\n","jsdoc":{"description":"\nFired whenever DOM is added or removed/hidden by this template (by\ndefault, rendering occurs lazily). To force immediate rendering, call\n`render`.\n\n","tags":[{"tag":"event","type":null,"description":"dom-change"}],"orig":"*\n * Fired whenever DOM is added or removed/hidden by this template (by\n * default, rendering occurs lazily). To force immediate rendering, call\n * `render`.\n *\n * @event dom-change\n "},"name":"dom-change","params":[]}],"properties":[{"name":"if","type":"Boolean","desc":"\nA boolean indicating whether this template should stamp.\n ","published":true,"default":false,"observer":"_queueRender","observerNode":{"type":"Literal","start":1020,"end":1034,"loc":{"start":{"line":37,"column":18},"end":{"line":37,"column":32}},"range":[1020,1034],"value":"_queueRender","raw":"'_queueRender'"},"jsdoc":{"description":"\nA boolean indicating whether this template should stamp.\n ","tags":[],"orig":"*\n * A boolean indicating whether this template should stamp.\n "}},{"__fromBehavior":"Polymer.Templatizer","name":"modelForElement","type":"Function","desc":"\nReturns the template \"model\" associated with a given element, which\nserves as the binding scope for the template instance the element is\ncontained in. A template model is an instance of `Polymer.Base`, and\nshould be used to manipulate data associated with this template instance.\n\nExample:\n\n var model = modelForElement(el);\n if (model.index < 10) {\n model.set('item.checked', true);\n }\n\n","params":[{"name":"el","type":"HTMLElement","desc":"Element for which to return a template model."}],"jsdoc":{"description":"\nReturns the template \"model\" associated with a given element, which\nserves as the binding scope for the template instance the element is\ncontained in. A template model is an instance of `Polymer.Base`, and\nshould be used to manipulate data associated with this template instance.\n\nExample:\n\n var model = modelForElement(el);\n if (model.index < 10) {\n model.set('item.checked', true);\n }\n\n","tags":[{"tag":"method","type":null,"name":"modelForElement","description":null},{"tag":"param","type":"HTMLElement","name":"el","description":"Element for which to return a template model."},{"tag":"return","type":"Object.<Polymer.Base>","description":"Model representing the binding scope for\n the element."}],"orig":"*\n * Returns the template \"model\" associated with a given element, which\n * serves as the binding scope for the template instance the element is\n * contained in. A template model is an instance of `Polymer.Base`, and\n * should be used to manipulate data associated with this template instance.\n *\n * Example:\n *\n * var model = modelForElement(el);\n * if (model.index < 10) {\n * model.set('item.checked', true);\n * }\n *\n * @method modelForElement\n * @param {HTMLElement} el Element for which to return a template model.\n * @return {Object<Polymer.Base>} Model representing the binding scope for\n * the element.\n "},"function":true,"return":{"type":"Object.<Polymer.Base>","desc":"Model representing the binding scope for\n the element."}},{"name":"render","type":"Function","desc":"\nForces the element to render its content. Normally rendering is\nasynchronous to a provoking change. This is done for efficiency so\nthat multiple changes trigger only a single render. The render method\nshould be called if, for example, template rendering is required to\nvalidate application state.\n ","params":[],"jsdoc":{"description":"\nForces the element to render its content. Normally rendering is\nasynchronous to a provoking change. This is done for efficiency so\nthat multiple changes trigger only a single render. The render method\nshould be called if, for example, template rendering is required to\nvalidate application state.\n ","tags":[],"orig":"*\n * Forces the element to render its content. Normally rendering is\n * asynchronous to a provoking change. This is done for efficiency so\n * that multiple changes trigger only a single render. The render method\n * should be called if, for example, template rendering is required to\n * validate application state.\n "},"function":true},{"name":"restamp","type":"Boolean","desc":"\nWhen true, elements will be removed from DOM and discarded when `if`\nbecomes false and re-created and added back to the DOM when `if`\nbecomes true. By default, stamped elements will be hidden but left\nin the DOM when `if` becomes false, which is generally results\nin better performance.\n ","published":true,"default":false,"observer":"_queueRender","observerNode":{"type":"Literal","start":1478,"end":1492,"loc":{"start":{"line":50,"column":18},"end":{"line":50,"column":32}},"range":[1478,1492],"value":"_queueRender","raw":"'_queueRender'"},"jsdoc":{"description":"\nWhen true, elements will be removed from DOM and discarded when `if`\nbecomes false and re-created and added back to the DOM when `if`\nbecomes true. By default, stamped elements will be hidden but left\nin the DOM when `if` becomes false, which is generally results\nin better performance.\n ","tags":[],"orig":"*\n * When true, elements will be removed from DOM and discarded when `if`\n * becomes false and re-created and added back to the DOM when `if`\n * becomes true. By default, stamped elements will be hidden but left\n * in the DOM when `if` becomes false, which is generally results\n * in better performance.\n "}},{"__fromBehavior":"Polymer.Templatizer","name":"stamp","type":"Function","desc":"\nCreates an instance of the template previously processed via\na call to `templatize`.\n\nThe object returned is an anonymous subclass of Polymer.Base that\nhas accessors generated to manage data in the template. The DOM for\nthe instance is contained in a DocumentFragment called `root` on\nthe instance returned and must be manually inserted into the DOM\nby the user.\n\nNote that a call to `templatize` must be called once before using\n`stamp`.\n\n","params":[{"name":"model","type":"Object=","desc":"An object containing key/values to serve as the\n initial data configuration for the instance. Note that properties\n from the host used in the template are automatically copied into\n the model."}],"jsdoc":{"description":"\nCreates an instance of the template previously processed via\na call to `templatize`.\n\nThe object returned is an anonymous subclass of Polymer.Base that\nhas accessors generated to manage data in the template. The DOM for\nthe instance is contained in a DocumentFragment called `root` on\nthe instance returned and must be manually inserted into the DOM\nby the user.\n\nNote that a call to `templatize` must be called once before using\n`stamp`.\n\n","tags":[{"tag":"method","type":null,"name":"stamp","description":null},{"tag":"param","type":"Object=","name":"model","description":"An object containing key/values to serve as the\n initial data configuration for the instance. Note that properties\n from the host used in the template are automatically copied into\n the model."},{"tag":"return","type":"Polymer.Base","description":"The Polymer.Base instance to manage the template\n instance."}],"orig":"*\n * Creates an instance of the template previously processed via\n * a call to `templatize`.\n *\n * The object returned is an anonymous subclass of Polymer.Base that\n * has accessors generated to manage data in the template. The DOM for\n * the instance is contained in a DocumentFragment called `root` on\n * the instance returned and must be manually inserted into the DOM\n * by the user.\n *\n * Note that a call to `templatize` must be called once before using\n * `stamp`.\n *\n * @method stamp\n * @param {Object=} model An object containing key/values to serve as the\n * initial data configuration for the instance. Note that properties\n * from the host used in the template are automatically copied into\n * the model.\n * @return {Polymer.Base} The Polymer.Base instance to manage the template\n * instance.\n "},"function":true,"return":{"type":"Polymer.Base","desc":"The Polymer.Base instance to manage the template\n instance."}},{"__fromBehavior":"Polymer.Templatizer","name":"templatize","type":"Function","desc":"\nPrepares a template containing Polymer bindings by generating\na constructor for an anonymous `Polymer.Base` subclass to serve as the\nbinding context for the provided template.\n\nUse `this.stamp` to create instances of the template context containing\na `root` fragment that may be stamped into the DOM.\n\n","params":[{"name":"template","type":"HTMLTemplateElement","desc":"The template to process."}],"jsdoc":{"description":"\nPrepares a template containing Polymer bindings by generating\na constructor for an anonymous `Polymer.Base` subclass to serve as the\nbinding context for the provided template.\n\nUse `this.stamp` to create instances of the template context containing\na `root` fragment that may be stamped into the DOM.\n\n","tags":[{"tag":"method","type":null,"name":"templatize","description":null},{"tag":"param","type":"HTMLTemplateElement","name":"template","description":"The template to process."}],"orig":"*\n * Prepares a template containing Polymer bindings by generating\n * a constructor for an anonymous `Polymer.Base` subclass to serve as the\n * binding context for the provided template.\n *\n * Use `this.stamp` to create instances of the template context containing\n * a `root` fragment that may be stamped into the DOM.\n *\n * @method templatize\n * @param {HTMLTemplateElement} template The template to process.\n "},"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"__hideTemplateChildren__","type":"Object","published":true,"observer":"_showHideChildren","observerNode":{"type":"Literal","start":2172,"end":2191,"loc":{"start":{"line":59,"column":18},"end":{"line":59,"column":37}},"range":[2172,2191],"value":"_showHideChildren","raw":"'_showHideChildren'"},"private":true},{"__fromBehavior":"Polymer.Templatizer","name":"__setPropertyImpl","type":"Function","params":[{"name":"property"},{"name":"value"},{"name":"fromAbove"},{"name":"node"}],"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_constructorImpl","type":"Function","params":[{"name":"model"},{"name":"host"}],"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_createForwardPropEffector","type":"Function","params":[{"name":"prop"}],"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_createHostPropEffector","type":"Function","params":[{"name":"prop"}],"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_createInstancePropEffector","type":"Function","params":[{"name":"prop"}],"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_customPrepAnnotations","type":"Function","params":[{"name":"archetype"},{"name":"template"}],"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_customPrepEffects","type":"Function","params":[{"name":"archetype"}],"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_debounceTemplate","type":"Function","params":[{"name":"fn"}],"private":true,"function":true},{"name":"_ensureInstance","type":"Function","params":[],"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_extendTemplate","type":"Function","desc":" values (_propertySetter back on instance once accessor is installed)","params":[{"name":"template"},{"name":"proto"}],"jsdoc":{"description":" values (_propertySetter back on instance once accessor is installed)","tags":[],"orig":" values (_propertySetter back on instance once accessor is installed)"},"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_flushTemplates","type":"Function","params":[],"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_forwardInstancePath","type":"Function","params":[{"name":"inst"},{"name":"path"},{"name":"value"}],"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_forwardInstanceProp","type":"Function","params":[{"name":"inst"},{"name":"prop"},{"name":"value"}],"private":true,"function":true},{"name":"_forwardParentPath","type":"Function","desc":" notifying parent.<path> path change on each row","params":[{"name":"path"},{"name":"value"}],"jsdoc":{"description":" notifying parent.<path> path change on each row","tags":[],"orig":" notifying parent.<path> path change on each row"},"private":true,"function":true},{"name":"_forwardParentProp","type":"Function","desc":" notifying parent.<prop> path change on instance","params":[{"name":"prop"},{"name":"value"}],"jsdoc":{"description":" notifying parent.<prop> path change on instance","tags":[],"orig":" notifying parent.<prop> path change on instance"},"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_getRootDataHost","type":"Function","params":[],"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_instanceProps","type":"Member","desc":" Extension point for overrides","jsdoc":{"description":" Extension point for overrides","tags":[],"orig":" Extension point for overrides"},"private":true},{"__fromBehavior":"Polymer.Templatizer","name":"_listenImpl","type":"Function","desc":" Decorate events with model (template instance)","params":[{"name":"node"},{"name":"eventName"},{"name":"methodName"}],"jsdoc":{"description":" Decorate events with model (template instance)","tags":[],"orig":" Decorate events with model (template instance)"},"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_notifyPathUpImpl","type":"Function","desc":" eslint-enable no-unused-vars ","params":[{"name":"path"},{"name":"value"}],"jsdoc":{"description":" eslint-enable no-unused-vars ","tags":[],"orig":" eslint-enable no-unused-vars "},"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_parentPropPrefix","type":"string","private":true},{"__fromBehavior":"Polymer.Templatizer","name":"_pathEffectorImpl","type":"Function","desc":" Overrides Base notify-path module","params":[{"name":"path"},{"name":"value"},{"name":"fromAbove"}],"jsdoc":{"description":" Overrides Base notify-path module","tags":[],"orig":" Overrides Base notify-path module"},"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_prepParentProperties","type":"Function","desc":" on the archetype and copied to instances.","params":[{"name":"archetype"},{"name":"template"}],"jsdoc":{"description":" on the archetype and copied to instances.","tags":[],"orig":" on the archetype and copied to instances."},"private":true,"function":true},{"name":"_queueRender","type":"Function","params":[],"private":true,"function":true},{"name":"_render","type":"Function","params":[],"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_scopeElementClassImpl","type":"Function","params":[{"name":"node"},{"name":"value"}],"private":true,"function":true},{"name":"_showHideChildren","type":"Function","params":[],"private":true,"function":true},{"__fromBehavior":"Polymer.Templatizer","name":"_showHideChildrenImpl","type":"Function","params":[{"name":"hide"}],"private":true,"function":true},{"name":"_teardownInstance","type":"Function","params":[],"private":true,"function":true},{"name":"_template","type":"object","private":true},{"name":"attached","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":["Polymer.Templatizer"],"observers":[],"is":"dom-if","contentHref":"temp/src/lib/template/dom-if.html","jsdoc":{"description":"\nStamps the template iff the `if` property is truthy.\n\nWhen `if` becomes falsey, the stamped content is hidden but not\nremoved from dom. When `if` subsequently becomes truthy again, the content\nis simply re-shown. This approach is used due to its favorable performance\ncharacteristics: the expense of creating template content is paid only\nonce and lazily.\n\nSet the `restamp` property to true to force the stamped content to be\ncreated / destroyed when the `if` condition changes.\n ","tags":[],"orig":"*\n * Stamps the template iff the `if` property is truthy.\n *\n * When `if` becomes falsey, the stamped content is hidden but not\n * removed from dom. When `if` subsequently becomes truthy again, the content\n * is simply re-shown. This approach is used due to its favorable performance\n * characteristics: the expense of creating template content is paid only\n * once and lazily.\n *\n * Set the `restamp` property to true to force the stamped content to be\n * created / destroyed when the `if` condition changes.\n "},"demos":[]}