chellimiller/html5-template.html

## html5-template.html
<!doctype html>
<html>
<title>PAGE</title>
<meta charset="utf-8">
<body onload="inform()">
<template id="chelli-link">

<style>
a {
color: red;
text-decoration: none;
font-size: 4em;
}
a:hover {
color: black;
}
</style>
  <a></a>
</template>

<script>
var proto = Object.create(HTMLElement.prototype, {
  createdCallback: {
    value: function() {
      var template = document.querySelector('#chelli-link');
	  console.log(template);
      var cloneTemplate = document.importNode(template.content, true);
	  var links = cloneTemplate.querySelectorAll("a");
	  links[0].textContent = 'helloTesting';
	  links[0].setAttribute('href', 'https://www.w3schools.com/jsref/met_element_setattribute.asp');
      this.createShadowRoot().appendChild(cloneTemplate);
    }
  }
});
document.registerElement('chelli-link', {prototype: proto});
</script>

<chelli-link></chelli-link>


</body>
<script>
function inform() {
	console.log('BODY RELOAD');
}
</script>


</html>
	<!doctype html>
	<html>
	<title>PAGE</title>
	<meta charset="utf-8">
	<body onload="inform()">
	<template id="chelli-link">

	<style>
	a {
	color: red;
	text-decoration: none;
	font-size: 4em;
	}
	a:hover {
	color: black;
	}
	</style>
	<a></a>
	</template>

	<script>
	var proto = Object.create(HTMLElement.prototype, {
	createdCallback: {
	value: function() {
	var template = document.querySelector('#chelli-link');
	console.log(template);
	var cloneTemplate = document.importNode(template.content, true);
	var links = cloneTemplate.querySelectorAll("a");
	links[0].textContent = 'helloTesting';
	links[0].setAttribute('href', 'https://www.w3schools.com/jsref/met_element_setattribute.asp');
	this.createShadowRoot().appendChild(cloneTemplate);
	}
	}
	});
	document.registerElement('chelli-link', {prototype: proto});
	</script>

	<chelli-link></chelli-link>


	</body>
	<script>
	function inform() {
	console.log('BODY RELOAD');
	}
	</script>


	</html>