<!DOCTYPE html>
<!--
Copyright 2012 The Polymer Authors. All rights reserved.
Use of this source code is goverened by a BSD-style
license that can be found in the LICENSE file.
-->
<meta charset="utf-8">
<script src="shadowdom.js"></script>
<style>

.el,
.sr {
  height: 300px;
  width: 300px;
}

</style>
<textarea class="el" placeholder="Element host"></textarea>
<textarea class="sr" placeholder="Shadow Root"></textarea>
<button onclick="update()">Update</button>

<div class="test">Real</div>

<script>

var el = document.querySelector('.test');
var sr = el.createShadowRoot();

sr.innerHTML = 'Before <content></content> After';

function update() {
  el.innerHTML = document.querySelector('.el').value;
  sr.innerHTML = document.querySelector('.sr').value;
}

document.querySelector('.el').value = el.innerHTML;
document.querySelector('.sr').value = sr.innerHTML;

</script>