lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
34 lines (31 loc) • 1.01 kB
HTML
<html>
<head>
<title>Form</title>
<script src="https://000686818.codepen.website/lightview.js?as=x-body"></script>
</head>
<body>
<form value="${hamburger}" style="margin:20px;padding:5px;border:1px;border-style:solid;">
<div>Hamburger options:</div>
<select value="${hamburger.options}" multiple>
<option value="lettuce">lettuce</option>
<option value="tomato">tomato</option>
<option>cheese</option>
</select>
<p id="variables">
</p>
</form>
<script id="lightview">
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
self.addEventListener("mounted",() => {
hamburger.options = ["cheese"];
// demo instrumentation
observe(() => {
const el = self.getElementById("variables");
el.innerText = JSON.stringify(hamburger);
});
});
}
</script>
</body>
</html>