Custom tag examples

Google map.js

/*
  Registers the following tags (use is property):

  * x-googlemap (iframe with api-key & address properties)

  be sure to enable polyfill: https://github.com/WebReflection/document-register-element
*/

(function() {
  var GoogleMapProto = Object.create(HTMLElement.prototype);

  Object.defineProperty(GoogleMapProto, "address", {writable: true});
  Object.defineProperty(GoogleMapProto, "api-key", {writable: true});

  GoogleMapProto.computeSrc = function(key, address) {
    return 'https://www.google.com/maps/embed/v1/place?key='+encodeURIComponent(key)+"&q="+encodeURIComponent(address);
  }

  GoogleMapProto.updateSrc = function() {
    this.setAttribute('src', this.computeSrc(this.getAttribute('api-key'), this.getAttribute('address')));
  }


  GoogleMapProto.createdCallback = function() {
    this.updateSrc();
  }

  GoogleMapProto.attributeChangedCallback = function(attrName, oldValue, newValue) {
    if (attrName === 'api-key' || attrName === 'address') {
      this.updateSrc();
    }
  }

  var GoogleMap = document.registerElement('x-googlemap', {
    prototype: GoogleMapProto,
    extends: 'iframe'
  });
  console.log("registered", GoogleMap)
})();