text: <!DOCTYPE html>
  <html lang="en">
  
  	<head>
  		<meta charset="utf-8">
  		<title>ReefJS Test</title>
  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  		<!-- stylesheets -->
  		<style type="text/css">
  			body {
  				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  				font-size: 112.5%;
  				margin-left: auto;
  				margin-right: auto;
  				max-width: 32em;
  				width: 88%;
  			}
  
  			label,
  			input {
  				display: block;
  				width: 100%;
  			}
  		</style>
  
  		<!-- scripts -->
  		<script src="../dist/reef.js"></script>
  	</head>
  
  	<body>
  
  		<main>
  
  			<div id="test2"></div>
  			<div id="test"></div>
  			<div id="app"></div>
  
  			<script>
  				// Turn on debug mode
  				Reef.debug(true);
  
  				var test2 = new Reef('#test2', {
  					data: {
  						showContent: true,
  						xss: `<img onerror="alert('xss attack yo!')" src=x>`
  					},
  					template: function (props) {
  						if (!props.showContent) return 'Hi';
  						return `
  							${props.xss}
  							<style>.color { color: red; }</style>
  							<p class="color">Hi!</p>`;
  					}
  				});
  				test2.render();
  
  				setTimeout(function () {
  					sourceOfTruth.data.showContent = true;
  				}, 2000);
  
  				var test = new Reef('#test', {
  					data: {
  						items: [1, 2, 3, 4],
  						sub: true
  					},
  					template: function (props) {
  						var html =
  							'<ul>' +
  								props.items.map(function (item) {
  									return '<li>' + item + '</li>';
  								}).join('') +
  							'</ul>';
  						if (props.sub) {
  							html +=
  								'<div><div><div>Hello</div>World</div>!</div>';
  						}
  						return html;
  					}
  				});
  				test.render();
  
  				var sourceOfTruth = new Reef.Store({
  					data: {
  						heading: '',
  						items: {
  							todos: [
  								'Buy milk',
  								'Bake a birthday cake',
  								'Go apple picking'
  							],
  							heading: 'Things'
  						},
  					}
  				});
  
  				var wrapper = new Reef('#app', {
  					store: sourceOfTruth,
  					template: function (props) {
  						return '<h1 sandwich="tuna">' + (props.items.heading.length > 0 ? props.items.heading : 'Hello, world!') + '</h1><div id="content"></div>';
  					},
  					attachTo: [sourceOfTruth]
  				});
  
  				var app = new Reef('#content', {
  					store: sourceOfTruth,
  					template: function (props) {
  						var html = '<h1>Todos</h1><ul sandwich="tuna">';
  						var styles = props.heading.length > 4 ? ' style="font-weight: bold; color: rebeccapurple; background-color: gainsboro;"' : '';
  						props.items.todos.forEach(function (todo) {
  							html += '<li' + styles + '>' + todo + '</li>';
  						});
  						html += '<input type="checkbox" defaultChecked>';
  						html += '<input type="text" id="heading"><br>';
  						html += '<strong>The title is:</strong> ' + (props.heading.length > 0 ? props.heading : 'Hello, world!');
  						html += '</ul>';
  						html += `
  							<label for="wizards">Who is the best wizard?</label>
  							<select>
  								<option value="harry">Harry</option>
  								<option value="hermione" defaultSelected>Hermione</option>
  								<option value="neville">Neville</option>
  							</select><br><br>`;
  						// html += '<img src="x" onerror="alert(\'XSS attack!\')">';
  						html += '<svg xmlns="http://www.w3.org/2000/svg" style="height:.8em;width:.8em" viewBox="0 0 16 16"><path fill="currentColor" d="M14 9v2.066c-1.258 1.285-3.016 2.526-5 2.852V8.001h3v-1L9 5.83A3.001 3.001 0 0 0 8 .001 3 3 0 0 0 7 5.83L4 7.001v1h3v5.917c-1.984-.326-3.742-1.567-5-2.852V9H0v1c0 2 4 6 8 6s8-4 8-6V9h-2zM9 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>';
  						html += '<button ' + (props.heading.length > 4 ? 'disabled' : '') + '>Disabled Button</button>';
  						return html;
  					},
  					attachTo: [wrapper]
  				});
  
  				// app.attach(wrapper);
  				wrapper.render();
  
  				// Update state on input change
  				document.addEventListener('input', function (event) {
  					if (!event.target.matches('#heading')) return;
  					sourceOfTruth.data.heading = event.target.value;
  				}, false);
  			</script>
  		</main>
  
  	</body>
  </html>