forked from jinkelajs/jinkela
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
43 lines (42 loc) · 1 KB
/
demo.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
<!DOCTYPE html>
<base href="https://yanagieiichi.github.io/jinkela/" />
<script src="jinkela.js"></script>
<script src="plugins/nesting.js"></script>
<script src="directives/on.js"></script>
<script>
class MyComponent extends Jinkela {
onInput({ target }) { this.value = target.value; }
get styleSheet() {
return `
:scope {
h1 { color: red; }
span { color: blue; }
input {
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
background: #f5f5f5;
padding: .25em;
}
input:focus {
outline: 0;
border: 1px solid #0c0;
background: #f5fff5;
}
}
`;
}
get template() {
return `
<div>
<h1>Hello <span>{value}</span></h1>
<input value="{value}" on-input="{onInput}" />
</div>
`;
}
}
addEventListener('DOMContentLoaded', () => {
new MyComponent({ value: 'Jinkela' }).renderTo(document.body);
});
</script>