-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcounter.html
28 lines (28 loc) · 1 KB
/
counter.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
<!doctype html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="description" content="sig-nal counter demo"/>
<title>sig-nal | counter demo</title>
<script type=module src="./dist/index.min.js"></script>
</head>
<body>
<template shadowrootmode="open">
<link rel="stylesheet" href="./counterdemo.css"/>
<h3>Interactive island</h3>
<p>The server supplied the initial value <b>3.</b></p>
<div>
<button @click="counter"><sig-nal ref="dec">-</sig-nal></button>
<div .textContent="counter"><sig-nal new="counter" type="number">3</sig-nal></div>
<button @click="counter"><sig-nal ref="inc">+</sig-nal></button>
<sig-nal hydrate>
{
counter: { ".textContent": rerender },
inc: { "@click": ({ signal }) => signal.value++ },
dec: { "@click": ({ signal }) => signal.value-- }
}
</sig-nal>
</div>
</template>
</body>
</html>