soo.js
Version:
custom-elements with renderer
46 lines (34 loc) • 1.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Components examples</title>
</head>
<body style="display:grid;grid-row-gap:50px; grid-template-columns:1fr 1fr;">
<time-element></time-element>
<slot-example>
<input type="text" placeholder="name.." name="user-name">
<input type="text" placeholder="age.." name="user-age">
<input type="text" placeholder="location.." name="user-location">
</slot-example>
<async-example></async-example>
<no-shadow></no-shadow>
<like-button></like-button>
<fragment-box></fragment-box>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>
<script type="module" src="index.js"></script>
<script type="module" src="./like_button.js"></script>
<script type="module" src="./clock.js"></script>
<script type="module" src="./async.js"></script>
<script type="module" src="./slots.js"></script>
<script type="module" src="./no_shadow.js"></script>
<script type="module" src="./fragment.js"></script>
<script>
document.addEventListener("submit-form", data => {
alert(JSON.stringify(data.detail));
})
</script>
</html>