pion
Hooks for Web Components
import { html } from 'https://unpkg.com/lit?module';
import { component, useState } from 'https://unpkg.com/@pionjs/pion';
function Counter() {
const [count, setCount] = useState(0);
return html`
<div part="count">${count}</div>
<button part="button" @click=${() => setCount(count + 1)}>
Increment
</button>
`;
}
customElements.define('my-counter', component(Counter));
<html lang="en">
<head>
<script type="module" src="my-counter.js"></script>
<style>
body { margin: 0; height: 100vh; }
body, my-counter {
display: grid;
place-items: center;
text-align: center;
}
my-counter {
gap: 20px;
}
my-counter::part(count) {
font-size: 24px;
}
my-counter::part(button) {
background: transparent;
border: 4px solid black;
padding: 6px 12px;
font-size: 18px;
border-radius: 8px;
}
my-counter::part(button):active {
background: rgba(0,0,0,0.1);
transform: translate(1px, 1px);
}
</style>
</head>
<my-counter></my-counter>
</html>