queerviolet/using-onload.html

## using-onload.html
<!doctype html>
<html>
  <head>
    <script src="using-onload.js"></script>
    <script>
      new Status.Error("Something went wrong");
      new Status.Error("I feel confused");
      new Status.Error("Rampancy emminent.");
    </script>
    <style>
      .butter-bar {
        background: fuchsia;
        color: black;
      }

      x-error {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="status-bar"></div>
    <script>
      console.log(Status.getLog());
    </script>
  </body>
</html>

## using-onload.js
"use strict";

var Status = (function() {
  var log = [];
  var statusbar;

  function append(node) {
    log.push(node);
    if (statusbar) {
      statusbar.appendChild(node);
    }
  }

  function Error(msg) {
    this.msg = msg;
    var node = document.createElement('x-error');
    node.textContent = msg;
    append(node);
  }

  function main() {
    statusbar = document.querySelector('.status-bar');
    // play any messages posted before the document was ready into
    // the status bar.
    for (var i = 0; i != log.length; ++i) {
      statusbar.appendChild(log[i]);
    }
  }

  window.addEventListener('load', main);

  return {
    Error: Error,
    getLog: function() {
      return log;
    },
  };
})();

## using-register-element.html
<!doctype html>
<html>
  <head>
    <script src="using-register-element.js"></script>
    <script>
      new Status.Error("Something went wrong");
      new Status.Error("I feel confused");
      new Status.Error("Rampancy emminent.");
    </script>
    <style>
      status-bar {
        display: block;
        background: fuchsia;
        color: black;
      }

      x-error {
        display: block;
      }
    </style>
  </head>
  <body>
    <status-bar></status-bar>
    <script>
      console.log(Status.getLog());
    </script>
  </body>
</html>

## using-register-element.js
"use strict";

var Status = (function() {
  var log = [];
  var statusbar;

  function append(node) {
    log.push(node);
    if (statusbar) {
      statusbar.appendChild(node);
    }
  }

  function Error(msg) {
    this.msg = msg;
    var node = document.createElement('x-error');
    node.textContent = msg;
    append(node);
  }

  var StatusBar = Object.create(HTMLElement.prototype);

  StatusBar.createdCallback = function() {
    statusbar = this;
    for (var i = 0; i != log.length; ++i) {
      this.appendChild(log[i]);
    }
  }

  document.registerElement('status-bar', {prototype: StatusBar});

  return {
    Error: Error,
    getLog: function() {
      return log;
    },
  };
})();
	<!doctype html>
	<html>
	<head>
	<script src="using-onload.js"></script>
	<script>
	new Status.Error("Something went wrong");
	new Status.Error("I feel confused");
	new Status.Error("Rampancy emminent.");
	</script>
	<style>
	.butter-bar {
	background: fuchsia;
	color: black;
	}

	x-error {
	display: block;
	}
	</style>
	</head>
	<body>
	<div class="status-bar"></div>
	<script>
	console.log(Status.getLog());
	</script>
	</body>
	</html>
	"use strict";

	var Status = (function() {
	var log = [];
	var statusbar;

	function append(node) {
	log.push(node);
	if (statusbar) {
	statusbar.appendChild(node);
	}
	}

	function Error(msg) {
	this.msg = msg;
	var node = document.createElement('x-error');
	node.textContent = msg;
	append(node);
	}

	function main() {
	statusbar = document.querySelector('.status-bar');
	// play any messages posted before the document was ready into
	// the status bar.
	for (var i = 0; i != log.length; ++i) {
	statusbar.appendChild(log[i]);
	}
	}

	window.addEventListener('load', main);

	return {
	Error: Error,
	getLog: function() {
	return log;
	},
	};
	})();