KyuWoo Choi kyuwoo-choi

## webcomponents-reactway-3.html
...
<body>
  <todo-app></todo-app>
</body>
</html>

## webcomponents-reactway-2.html
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/custom-elements-es5-adapter.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-sd-ce.js" defer></script>
  <script src="./dist/TodoApp.js" defer></script>
</head>

## webcomponents-reactway-1-1.sh
git clone git@github.com:kyuwoo-choi/todo-web-components.git

## template-element-9.js
el.innerHTML = `
    <div>
        <h1>${title}</h1>
        <body>${content}</body>
    </div>
`

## template-element-8.html
<!-- add dependencies -->
<link rel="import" href="./dependent-element.html">
<!-- web component template -->
<template id="nameTagTemplate">
<style>
    .outer {
      border: 2px solid brown;
      background: red;
    }
    .name {

## template-element-7.html
<!-- main page -->
<head>
    <link rel="import" href="bootstrap.html">
</head>
<!-- bootstrap.html -->
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>

## template-element-6.html
<div id="nameTag">Bob</div>
<template id="nameTagTemplate">
<style>
    .outer {
      border: 2px solid brown;
      background: red;
    }
    .name {
      color: black;
    }

## template-element-5.html
<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

## template-element-4-1.js
// Virtual DOM example
var tree = render(count);               // We need an initial tree
var rootNode = createElement(tree);     // Create an initial root DOM node ...
document.body.appendChild(rootNode);    // ... and it should be in the document
setInterval(function () {
      count++;
      var newTree = render(count);
      var patches = diff(tree, newTree);
      rootNode = patch(rootNode, patches);
      tree = newTree;

## template-element-3.html
<!-- angular: loop -->
<header ng-repeat-start="item in items">
  Header {{ item }}
</header>
<!-- handlebars: conditional -->
<div class="entry">
  {{#if author}}
    <h1>{{firstName}} {{lastName}}</h1>
  {{/if}}
</div>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/custom-elements-es5-adapter.js" defer></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-sd-ce.js" defer></script>
	<script src="./dist/TodoApp.js" defer></script>
	</head>
	el.innerHTML = `
	<div>
	<h1>${title}</h1>
	<body>${content}</body>
	</div>
	`
	<!-- add dependencies -->
	<link rel="import" href="./dependent-element.html">
	<!-- web component template -->
	<template id="nameTagTemplate">
	<style>
	.outer {
	border: 2px solid brown;
	background: red;
	}
	.name {
	<!-- main page -->
	<head>
	<link rel="import" href="bootstrap.html">
	</head>
	<!-- bootstrap.html -->
	<link rel="stylesheet" href="bootstrap.css">
	<link rel="stylesheet" href="fonts.css">
	<script src="jquery.js"></script>
	<script src="bootstrap.js"></script>
	<script src="bootstrap-tooltip.js"></script>
	<div id="nameTag">Bob</div>
	<template id="nameTagTemplate">
	<style>
	.outer {
	border: 2px solid brown;
	background: red;
	}
	.name {
	color: black;
	}
	<template id="productrow">
	<tr>
	<td class="record"></td>
	<td></td>
	</tr>
	</template>
	// Virtual DOM example
	var tree = render(count); // We need an initial tree
	var rootNode = createElement(tree); // Create an initial root DOM node ...
	document.body.appendChild(rootNode); // ... and it should be in the document
	setInterval(function () {
	count++;
	var newTree = render(count);
	var patches = diff(tree, newTree);
	rootNode = patch(rootNode, patches);
	tree = newTree;
	<!-- angular: loop -->
	<header ng-repeat-start="item in items">
	Header {{ item }}
	</header>
	<!-- handlebars: conditional -->
	<div class="entry">
	{{#if author}}
	<h1>{{firstName}} {{lastName}}</h1>
	{{/if}}
	</div>