Bring your HTML to life.
Corset binds JavaScript to HTML. It doesn't matter how the HTML is produced and Corset doesn't need to own your templating choice. Instead it uses a CSS-like syntax to enhance whatever you give it.
<div class="counter">
<button
type="button"
class="increment">Increment</button>
<button
type="button"
class="decrement"
disabled>Decrement</button>
<div
class="result">
Count: <strong class="count">0</strong>
</div>
</div>import sheet, { mount } from 'https://cdn.corset.dev/v2';
mount(document, class {
count = 0;
bind() {
const { count } = this;
return sheet`
.counter {
--count: ${count};
--inc: ${() => this.count = count + 1};
--dec: ${() => this.count = count - 1};
}
.count {
text: var(--count);
}
.increment {
event: click var(--inc);
}
.decrement {
attr-toggle: disabled ${count === 0};
event: click var(--dec);
}
`;
}
});