@todojs/

19.wc-example

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • grid.css
  • my-input.js
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Shadow DOM & HTMLELement</title>
  <script src="my-input.js"></script>
</head>
<body>
<my-input id="name" label="Name" type="text" left="4" right="6" value="John Smith"></my-input>
<my-input id="email" label="Email" type="email" left="4" right="6" value="[email protected]"></my-input>
<script>
  document.querySelector('#name').addEventListener('change', function(evt) {
    alert('nane is changed with value: ' + evt.target.value);
  });
  document.querySelector('#email').addEventListener('change', function(evt) {
    alert('email is changed with value: ' + evt.target.value);
  });
</script>
<script>
</script>
</body>
</html>
result
console