⚠ Caution: this library is still on development, some features might be not working properly or missing. Use at your own risk.
- Include script
<script src="https://siput.dev/siput.js"></script>- Create Custom Element
<script>
customElements.define("my-custom-element", class extends Siput {
html = `
<style>
.container { display: flex; flex-direction: column; gap: 8px }
</style>
<div class="container">
<input type="text" value="{{myvar}}" oninput="updateMyVar" />
<div>{{ myvar }}</div>
</div>
`;
init() {
this.data.myvar.value = ''; // init empty value
}
updateMyVar(e) {
this.data.myvar.value = e.target.value;
}
});
</script>- Use your custom element on body
<body>
<my-custom-element></my-custom-element>
</body>cd into project directory
npx http-server -o . -c-1Element that semantically invalid by HTML spec, will be fail on parsing, ex:
<tr>
<td>
{{ no }}
</td>
<td>
{{ nama }}
</td>
<td>
{{ email }}
</td>
<td>
{{ alamat }}
</td>
</tr>will not be parsed as ELEMENT_NODE, instead it become TEXT_NODE.
Another similar issue found when create dynamic child render below:
<table>
{{ #rows }}
</table>will be rearranged to be:
{{ #rows }}
<table>
</table>