forked from googlearchive/ShadowDOM
-
Notifications
You must be signed in to change notification settings - Fork 1
/
play.html
39 lines (30 loc) · 882 Bytes
/
play.html
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
<!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>