Custom Element - Defining Properties and Methods

gistfile1.js

// example 1

var XElementProto = object.create(HTMLElement.prototype);
// add a method
XElementProto.foo = function() {
  console.log('foo method called');
}
// add a read-only property
Object.defineProperty(XElementProto, "bar", {isCustomElement : true});
// register your custom element
var XElement = document.registerElement('x-element', { prototype : XElementProto });
// instantiate the custom element
var xElement = document.createElement('x-element');
// add it to the DOM
document.body.appendChild(xElement);


//example 2

var XElement = document.registerElement('x-element', {
  prototype : Object.create(HTMLElement.prototype, {
    foo : function() {
      console.log('foo method called');
    },
    bar : {
      get : function() {
        return true;
      }
    }
  })
});