# Polymer 1.x Cheat Sheet

DevFeed: [Polymer 1.x Cheat Sheet](<https://devfeed.tech/articles/polymer-1-x-cheat-sheet-35536.md>)

Original publisher: [Read original article](<https://meowni.ca/posts/polymer-cheatsheet/>)

Author: Monica Dinculescu

Published: 2016-12-13T00:00:00Z

Content type: tutorial

Language: en

Sources: [Monica Dinculescu](<https://devfeed.tech/sources/monica-dinculescu.md>)

Topics: [Cheat sheet](<https://devfeed.tech/topics/cheatsheet.md>), [Library](<https://devfeed.tech/topics/library.md>), [Web Components](<https://devfeed.tech/topics/web-components.md>), [Code](<https://devfeed.tech/topics/code.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [cheat-sheet](<https://devfeed.tech/tags/cheat-sheet.md>), [code](<https://devfeed.tech/tags/code.md>), [components](<https://devfeed.tech/tags/components.md>), [css](<https://devfeed.tech/tags/css.md>), [javascript](<https://devfeed.tech/tags/javascript.md>)

## AI overview

A cheat sheet for the Polymer 1.x library covering Web Components development, including element and behavior definitions, lifecycle methods, data binding, observers, listeners, properties, style modules, custom properties, mixins, and template helpers.

## Source excerpt

This is a cheat sheet for the Polymer 1.x library. It helps you write Web Components, which are pretty 🔥🔥🔥. If you're interested in the Polymer 2.0 cheat sheet, it's here. If you think something is missing from this page, tell me about it! Defining an element Defining a behaviour Lifecycle methods Data binding Observers Listeners Properties block Observing added and removed children Style modules Styling with custom properties and mixins Binding helper elements Defining an element Docs: registering an element, behaviours, shared style modules <dom-module id="element-name"> <template> <!-- Use one of these style declarations, but not both --> <!-- Use this if you don't want to include a shared style --> <style></style> <!-- Use this if you want to include a shared style --> <style include="some-style-module-name"></style> </template> <script> Polymer({ is: 'element-name', // All of these are optional. Only keep the ones you need. behaviors: [], observers: [], listeners: {}, hostAttributes: {}, properties: {} }); </script> </dom-module> Defining a behaviour Docs: behaviours. Defining a behavior to share implementation between different elements: <script> MyNamespace.MyFancyBehaviorImpl = { // Code that you want common to elements, such // as behaviours, methods, etc. } MyNamespace.MyFancyBehavior = [ MyFancyBehaviorImpl, /* You can add other behaviours here */ ]; </script> Using the behavior in an element: <dom-module id="element-name"> <template> <!-- ... --> </template> <script> Polymer({ is: 'element-name', behaviors: [MyNamespace.MyCustomButtonBehavior] /* ... */ }); </script> </dom-module> Lifecycle methods Docs: lifecycle callbacks. Polymer({ registered: function() {}, created: function() {}, ready: function() {}, attached: function() {}, detached: function() {} }); There's an attributeChanged callback as well, but that's very rarely used. Data binding Docs: data binding, attribute binding, binding to array items, computed bindings. Don't forget: Polymer camel-c