WebComponents-Examples/templates/simple/index.html at master · lug-io/WebComponents-Examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
	<head>
		<title>Templates</title>

		<!-- Polyfills for WebComponents Support -->
		<script type="text/javascript" src="../../bower_components/webcomponentsjs/webcomponents.js"></script>
		<!-- For easier DOM manipulation -->
		<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.js"></script>

		<script>

			// CHECK SUPPORT
			function supportsTemplate() {
				return 'content' in document.createElement('template');
			}

			// ADD SIMPLE
			function addSimple(){

				// Grab our template
				var t = document.querySelector('template#simple').content;

				// Optional -- Modify template

				// Clone and add
				var clone = document.importNode(t, true);
				document.getElementById("simple-target").appendChild(clone);
				boom();

				return false;
			}

			$(function(){
				if (supportsTemplate()) {
				 	console.log("Good to go!");
				} else {
					$("#if-support").html("Your browser does not work with the in-place polyfill.")
				}
			});
		</script>
	</head>
	<body>
		<h3>Simple Template - Example</h3>

		<div id="simple-target" style="width: 100%; min-height: 50px; border: solid 1px black;">
			 <!-- Simple Template will be added here -->
			 <span>Pre-Existing Span</span>
		</div>

		<div id="if-support">
			<button onclick="return addSimple(this)">Add Template</button>
		</div>


		<!-- Template Storage ;) -->
		<template id="simple">
			<style>
				span { color: purple; }
			</style>

			<img src="http://placehold.it/50x50" />
			<span>Hello World!</span>

			<script>
				function boom(){
					alert("BOOM!");
				}
			</script>
		</template>
		<!-- END Template Storage -->
	</body>
</html>