lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
41 lines (37 loc) • 1.09 kB
HTML
<html>
<head>
<title>Form</title>
<template id="myform">
${formname}: <form>
<input type="text" value="${name}">
</form>
<script id="lightview">
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
self.variables({
name: "string"
}, {
shared,
reactive
});
self.variables({
formname: "string"
}, {
imported
});
}
</script>
</template>
<script src="https://000686818.codepen.website/lightview.js"></script>
<script>
Lightview.createComponent("x-form", document.getElementById("myform"))
</script>
</head>
<body>
<div style="margin:20px">
<p>Changing one field will change the other. Try it.</p>
<x-form formname="Form1"></x-form>
<x-form formname="Form2"></x-form>
</div>
</body>
</html>