# Polymer 2.x Cheat Sheet

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

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

Author: Monica Dinculescu

Published: 2017-05-31T00:00:00Z

Content type: tutorial

Language: en

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

Topics: [Library](<https://devfeed.tech/topics/library.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [HTML](<https://devfeed.tech/topics/html.md>)

Tags: [cheat-sheet](<https://devfeed.tech/tags/cheat-sheet.md>), [guide](<https://devfeed.tech/tags/guide.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [library](<https://devfeed.tech/tags/library.md>)

## AI overview

A reference cheat sheet for the Polymer 2.x library covering custom elements, element extension, mixins, lifecycle methods, data binding, observers, listeners, properties, child-node observation, style modules, and related APIs.

## Source excerpt

This is a cheat sheet for the Polymer 2.x library. If you're looking for the Polymer 1.x cheat sheet, it is here. If you think something is missing from this page, tell me about it! Defining an element Extending an element Defining a mixin 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: 1.x -> 2.x upgrade guide, registering an element, shared style modules. <link rel="import" href="bower_components/polymer/polymer-element.html"> <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> class MyElement extends Polymer.Element { static get is() { return 'element-name'; } // All of these are optional. Only keep the ones you need. static get properties() { ... } static get observers() { ... } } // Associate the new class with an element name customElements.define(MyElement.is, MyElement); </script> </dom-module> To get the class definition for a particular custom tag, you can use customElements.get('element-name'). Extending an element Docs: extending elements, inherited templates. Instead of Polymer.Element, a custom element can extend a different element): class ParentElement extends Polymer.Element { /* ... */ } class ChildElement extends ParentElement { /* ... */ } To change or add to the parent's template, override the template getter: <dom-module id="child-element"> <template> <style> /* ... */ </style> <span>bonus!</span> </template> <script> var childTemplate; var childTemplate = Polymer.DomModule.import('child-element', 'template'); var parentTemplate = ParentElement.template.cloneNode(true); // Or however you want to assemble these. childTemplate.content.ins