TakayoshiKochi/jsbin.nodowehi.html

## jsbin.nodowehi.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<div id="yosin">
  <span class=name>Yoshifumi</span>
  <span class=company>Google</span>
</div>

<div id="kochi">
  <span class=name>Takayoshi</span>
  <span class=company>Google</span>
</div>

<template id=namecard>
  <div class="card">
    <style>
      div {
        border: 1px solid #408040;
        border-radius: 3px;
        padding: 5px;
        margin-bottom: 5px;
      }
    </style>
    <span>Name:</span>
    <content select=".name"></content><br>
    <span>Company:</span>
    <content select=".company"></content><br>
  </div>
</template>

</body>
</html>

## jsbin.nodowehi.js
var tmpl = document.querySelector('#namecard');

var host = document.querySelector('#yosin');
var root = host.createShadowRoot();
root.appendChild(tmpl.content.cloneNode(true));

var host2 = document.querySelector('#kochi');
var root2 = host2.createShadowRoot();
root2.appendChild(tmpl.content.cloneNode(true));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	<div id="yosin">
	<span class=name>Yoshifumi</span>
	<span class=company>Google</span>
	</div>

	<div id="kochi">
	<span class=name>Takayoshi</span>
	<span class=company>Google</span>
	</div>

	<template id=namecard>
	<div class="card">
	<style>
	div {
	border: 1px solid #408040;
	border-radius: 3px;
	padding: 5px;
	margin-bottom: 5px;
	}
	</style>
	<span>Name:</span>
	<content select=".name"></content><br>
	<span>Company:</span>
	<content select=".company"></content><br>
	</div>
	</template>

	</body>
	</html>
	var tmpl = document.querySelector('#namecard');

	var host = document.querySelector('#yosin');
	var root = host.createShadowRoot();
	root.appendChild(tmpl.content.cloneNode(true));

	var host2 = document.querySelector('#kochi');
	var root2 = host2.createShadowRoot();
	root2.appendChild(tmpl.content.cloneNode(true));