dfreedm/ce.html

## ce.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    x-foo {
      display: block;
      height: 100px;
      width: 100px;
      background: orange;
    }
  </style>
</head>
<body>
  <x-foo id="a"></x-foo>
  <script>
    var proto = Object.create(HTMLElement.prototype);

    proto.createdCallback = function() {
      console.log('created', this.id);
    };

    proto.attachedCallback = function() {
      console.log('attached', this.id);
    };

    proto.detachedCallback = function() {
      console.log('detached', this.id);
    };

    function register(name, block) {
      var fn = document.registerElement || document.register;
      if (fn) {
        if (~navigator.userAgent.indexOf('Firefox')) {
          block.lifecycle = {
            created: block.prototype.createdCallback,
            inserted: block.prototype.attachedCallback,
            removed: block.prototype.detachedCallback
          };
        }
        fn.call(document, name, block);
      } else {
        console.error('no way to register :(');
      }
    }

    register('x-foo', {prototype: proto});
  </script>
  <x-foo id="b"></x-foo>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	x-foo {
	display: block;
	height: 100px;
	width: 100px;
	background: orange;
	}
	</style>
	</head>
	<body>
	<x-foo id="a"></x-foo>
	<script>
	var proto = Object.create(HTMLElement.prototype);

	proto.createdCallback = function() {
	console.log('created', this.id);
	};

	proto.attachedCallback = function() {
	console.log('attached', this.id);
	};

	proto.detachedCallback = function() {
	console.log('detached', this.id);
	};

	function register(name, block) {
	var fn = document.registerElement \|\| document.register;
	if (fn) {
	if (~navigator.userAgent.indexOf('Firefox')) {
	block.lifecycle = {
	created: block.prototype.createdCallback,
	inserted: block.prototype.attachedCallback,
	removed: block.prototype.detachedCallback
	};
	}
	fn.call(document, name, block);
	} else {
	console.error('no way to register :(');
	}
	}

	register('x-foo', {prototype: proto});
	</script>
	<x-foo id="b"></x-foo>
	</body>
	</html>