A simplified way to register Custom Elements

dom-class-zero.js

var DOMClass = (function (O,o) {

  /*! (C) Andrea Giammarchi */

  var
    create = O.create,
    css = create(null),
    dP = O.defineProperty,
    gOPD = O.getOwnPropertyDescriptor,
    gOPN = O.getOwnPropertyNames,
    gOPS = O.getOwnPropertySymbols,
    ownKeys = gOPS ?
      function (object) {
        return gOPN(object).concat(gOPS(object));
      } :
      gOPN,
    loadCSS = function (document, href) {
      var
        head =  document.head,
        link =  document.createElement('link')
      ;
      link.rel   = 'stylesheet';
      link.type  = 'text/css';
      link.href  = href;
      css[href] = head.insertBefore(link, head.lastChild);
    }
  ;

  return function DOMClass(description) {
    for (var
      k, name, xtends,
      constructor,
      stylesheet,
      descriptors = {},
      keys = ownKeys(description),
      set = function (s) {
        dP(descriptors, s, {
          enumerable: true,
          writable: true,
          value: gOPD(description, k)
        });
      },
      i = 0; i < keys.length; i++
    ) {
      k = keys[i];
      switch (k.toLowerCase()) {
        case 'name': name = description[k]; break;
        case 'stylesheet': stylesheet = description[k]; break;
        case 'extends':
          xtends = typeof description[k] === 'function' ?
            description[k].prototype : description[k];
          break;
        case 'constructor': constructor = description[k];
                            set('createdCallback');           break;
        case 'onattached':  set('attachedCallback');          break;
        case 'onchanged':   set('attributeChangedCallback');  break;
        case 'ondetached':  set('detachedCallback');          break;
        default: set(k); break;
      }
    }
    if (stylesheet) {
      descriptors.createdCallback.value = function () {
        if (!(stylesheet in css))
          loadCSS(this.ownerDocument || document, stylesheet);
        if (constructor) constructor.apply(this, arguments);
      };
    }
    return document.registerElement(
      name || ('zero-dom-class-'+ ++o),
      {prototype: create(xtends || HTMLElement.prototype, descriptors)}
    );
  };

}(Object, 0));

Basic usage example.

var MyComponent = DOMClass({
  // optional, generated at runtime otherwise
  name: 'my-component',
  // optional, it lazy-loads only when the first <my-component> is created
  styleSheet: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
  // optional, you can extend user defined components (natives too via DOMClass)
  extends: MyPreviousComponent,
  // alias for createdCallback
  constructor: function () {
    console.log('created', arguments);
  },
  // alias for other not-so friendly standard methods
  onAttached: function () {
    console.log('attached', arguments);
  },
  onDetached: function () {
    console.log('detached', arguments);
  },
  onChanged: function () {
    console.log('attribute changed', arguments);
  }
});

document.body.appendChild(new MyComponent).textContent = 'hello world';

Full DOMClass Features

The original utility which is capable of doing way more than above snippet is here.