Corset — Cascading Binding Sheets

Matthew Philips made something odd-looking: a JavaScript framework that lets you add DOM bindings using a CSS-like syntax.

Say your framework of choice generates this markup:

<div class="counter">

    Count: <strong class="count">0</strong>

Using Corset, you can then add behavior as follows:

import sheet, { mount } from '';

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);

If you’re getting flashbacks to Action Sheets or Behavioral Extensions, then that’s totally legit.

Here’s a working demo using the code posted above:

See the Pen
Counter example
by Matthew Phillips (@matthewp)
on CodePen.

This Twitter thread by the author holds some good information and reasoning behind it all:

Corset — Cascading Binding Sheets →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.