Polymer Notes

Notes while watching:

https://www.youtube.com/watch?v=iJ9hS54BRag

  1. The goal of Polymer is to bring developers closer to the platform
  2. Web components are native to the browsers so that users do not need to download a bunch of stuff
  3. Polymer should get smaller as time goes on
  4. Custom elements - let you associate a tag with a class

To create a custom element

  1. call
class MyElement extends HTMLElement {
    static get observerdAttributes() {
        return ['selected'];
    }
    constructor() {
        super(); always call super()first
        this.addEventListener('click', doClick);
        this.isAwesome = true;
        this.attachShadow({mode: 'open});
        // No inspecting attributes or children!
    }
    
    connectedCallback() {
        // Called every time the element is inserted
        // into the DOM
        // Useful for running setup code, such as
        // fetching resources or rendering
    }
    
    disconnectedCallback() {
        // Called every time the element is removed
        // from the DOM.
        // Useful for running clean up code (removing
        // event listeners, etc.).
    }
    
    adoptedCallback(oldDoc, newDoc) {
        // The custom element has been moved into a
        // new document (e.g., someone called
        // document.adoptNode(e1)).
    }
   
    attributeChangedCallBack(attrName, oldVal, newVal) {
        // An attribute was added, removed, updated, or
        // replaced. Also called for initial values
        // when an element is created by the parser, or
        // upgraded.
    }
    
}

customElements.define('my-element', MyElement);
  1. A good way to use the attributeChangedCallBack is to use it to synchronize your attributes and properties
  2. Properties are a good way to represent the state of an object, instead of having methods that simply toggle something like a check box. It simplifies the code and plays nice with frameworks
  3. Dispatch events for any state change:
onClick(e) {
    this.checked = !this.checked;
    this.dispatchEvent(new CustomEvent('checked-changed', {
        detail: { checked: this.checked }, bubbles: false
    }));
  }

More on Custom Elements

  1. For any <custom-element>:
    • you get data in using attributes and properties
    • you get data out using events (DOM events)
  2. Properties can pass any value, but attributes can only pass string values
  3. HTML has not declarative way to pass complex data
Polymer Notes
Share this