JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/webcompose@latest/dist/webcompose.min.js"></script>
<simple-counter></simple-counter>
JavaScript
const { ComposableElement, html, withState, withHandlers } = window.webcompose
class Counter extends ComposableElement {
static get composition(){
return [
withState("counter","setCounter",1),
withHandlers({
increment : ({counter, setCounter}) => () => {
setCounter(counter+1);
}
})
]
}
static render({counter, increment}){
return html`
${counter} <button on-click=${increment}>+</button>
`
}
}
customElements.define("simple-counter", Counter);