DotNetNerd/CustomElements

## CustomElements
<html>

	<body>
		<style>
			element {
				display:none;
			}
		</style>

		<script src="CustomElements/custom-elements.js"></script>
		<!--
		<script>

			var XFooPrototype = Object.create(HTMLElement.prototype);
			XFooPrototype.readyCallback = function() {
			  this.textContent = "I'm an x-foo!";
			};
			XFooPrototype.foo = function() {
			  console.log('foo() called');
			};

			var XFoo = document.register('x-foo', {
			  prototype: XFooPrototype
			});
		</script>
		-->

		<x-foo><p>Wee</p></x-foo>

		<element name="x-foo" constructor="XFoo">
		  <section>
		    I'm an x-foo!

		  </section>

		  <script>
		    // When <element> is in document, we might run in wrong context.
		    // Only do work when this == <element>.
		    if (this !== window) {
		      var section = this.querySelector('section');

		      // Has built-in 'window' protection.
		      this.register({
		        prototype: {
		          readyCallback: function() {
		            this.innerHTML = section.innerHTML;
		          },
		          foo: function() {
		            console.log('foo() called');
		          }
		        }
		     });
		    }


		  </script>
		</element>


		<script>
		  // hide body to prevent FOUC
		  document.body.style.opacity = 0;
		  window.addEventListener('WebComponentsReady', function() {
		    // show body now that everything is ready
		    document.body.style.opacity = 1;

		    var shadow = document.querySelector("x-foo");
				    shadow.foo();


			var xFoo = new XFoo();
			document.body.appendChild(xFoo);

			var xFoo2 = document.createElement('x-foo');
			xFoo2.foo();
		  });
		</script>


	</body>
</html>
	<html>

	<body>
	<style>
	element {
	display:none;
	}
	</style>

	<script src="CustomElements/custom-elements.js"></script>
	<!--
	<script>

	var XFooPrototype = Object.create(HTMLElement.prototype);
	XFooPrototype.readyCallback = function() {
	this.textContent = "I'm an x-foo!";
	};
	XFooPrototype.foo = function() {
	console.log('foo() called');
	};

	var XFoo = document.register('x-foo', {
	prototype: XFooPrototype
	});
	</script>
	-->

	<x-foo><p>Wee</p></x-foo>

	<element name="x-foo" constructor="XFoo">
	<section>
	I'm an x-foo!

	</section>

	<script>
	// When <element> is in document, we might run in wrong context.
	// Only do work when this == <element>.
	if (this !== window) {
	var section = this.querySelector('section');

	// Has built-in 'window' protection.
	this.register({
	prototype: {
	readyCallback: function() {
	this.innerHTML = section.innerHTML;
	},
	foo: function() {
	console.log('foo() called');
	}
	}
	});
	}




	</script>
	</element>


	<script>
	// hide body to prevent FOUC
	document.body.style.opacity = 0;
	window.addEventListener('WebComponentsReady', function() {
	// show body now that everything is ready
	document.body.style.opacity = 1;

	var shadow = document.querySelector("x-foo");
	shadow.foo();


	var xFoo = new XFoo();
	document.body.appendChild(xFoo);

	var xFoo2 = document.createElement('x-foo');
	xFoo2.foo();
	});
	</script>



	</body>
	</html>