Build once.
Use everywhere.
Custom elements that feel like native HTML.
class CounterComponent extends Component {
static refs = ["count", "increment", "decrement"];
static states = {
value: { type: Number, default: 0 },
};
connect() {
this.on("increment", "click", this.handleIncrement);
this.on("decrement", "click", this.handleDecrement);
this.watch("value", this.handleValueChange);
}
handleIncrement() {
this.value++;
}
handleDecrement() {
this.value--;
}
handleValueChange(value) {
this.countEl.textContent = value;
}
}
defineElement("my-counter", {
component: CounterComponent,
});<my-counter>
<my-counter-decrement>-</my-counter-decrement>
<my-counter-count>0</my-counter-count>
<my-counter-increment>+</my-counter-increment>
</my-counter>my-counter {
display: flex;
align-items: center;
gap: 1rem;
}
my-counter-count {
font-size: 2rem;
font-weight: 600;
min-width: 3ch;
text-align: center;
}
my-counter-decrement,
my-counter-increment {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
border: 1px solid var(--color-border);
cursor: pointer;
}