Polymer 2.0

UP: TOC

Polymer 1.0: One size fits all --> Polymer 2.0: à la carte Polymer 1.0: do less to be fast --> Polymer 2.0: do more if you need to

Where to start? HTML Element getters/setters (PropertyAccessors) templateStamp PropertyEffects Polymer.Element

Custom Element

// what does the element do?
class MyElement extends HTMLElement {
   // Lifecyle methods:
   constructor() {  
      super();
      this.attachShadow({ mode: 'open' });     // make the shadow root
   }
   connectedCallback() {  ... }  // called when an element is attached to the document
   disconnectedCallback()  {  ..... }    // called when an element is detached from the document
   attributeChangedCallback(attr, oldValue, newValue) {    // attr value has changed
      if (oldValue !== newValue) {
          this[attr] = newValue;
      } 
   }   

   static get observedAttributes() {  return [ ... ]; }

  ...
}
// tell the browser to use the element
customElements.define('my-element', MyElement);   
UP: TOC