-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
64 lines (59 loc) · 2.19 KB
/
index.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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE>
<html>
<head>
<title>Testing - Web Components</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.7/webcomponents-lite.js"></script>
<link rel="import" href="./super-button.html">
<style>
body {
color: #999;
}
.button {
font-size: 30px;
}
super-button {
--border-color: maroon;
}
.icon {
float: left;
width: 30px;
}
</style>
<script>
function updateBtn1Label() {
const newLabel = document.getElementById('newLabel').value;
const superBtns = document.getElementsByTagName('super-button');
superBtns[0].setAttribute('label-text', newLabel);
};
function updateBtn2Color() {
const newColor = document.getElementById('newColor').value;
const superBtns = document.getElementsByTagName('super-button');
superBtns[1].setAttribute('color', newColor);
};
</script>
</head>
<body>
Button1: <super-button label-text="Super Button1" color="red">
<img src="http://i.imgur.com/Js4qqR7.png" class="icon" slot="icon" />
<b>Child1</b>
</super-button> <br />
Button2: <super-button label-text="Super Button2">
<img src="http://i.imgur.com/Js4qqR7.png" class="icon" slot="icon" />
<b>Child2</b>
</super-button>
<br /><br />
Update Button1 Label <br />
<input type="text" id="newLabel"><br />
<button onclick="updateBtn1Label()">Update Label</button>
<br /><br />
New Color <br />
<select id="newColor">
<option value="">Default</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select> <br />
<button onclick="updateBtn2Color()">Update Color</button>
</body>
</html>